rename method

playground/app/graphqlMiddleware.clientOptions.ts

@@ -4,7 +4,7 @@ import { useCurrentLanguage } from '#imports'
 export default defineGraphqlClientOptions<{
   language: string
 }>({
-  getContext() {
+  buildClientContext() {
     const language = useCurrentLanguage()
 
     return {

src/runtime/composables/useAsyncGraphqlQuery.ts

@@ -105,8 +105,8 @@ export function useAsyncGraphqlQuery<
   return useAsyncData<GraphqlResponse<ResponseType>, unknown, DefaultT>(
     key,
     () => {
-      const clientContext = clientOptions.getContext
-        ? encodeContext(clientOptions.getContext())
+      const clientContext = clientOptions.buildClientContext
+        ? encodeContext(clientOptions.buildClientContext())
         : {}
       return performRequest<ResponseType>(
         'query',

src/runtime/composables/useGraphqlMutation.ts

@@ -26,8 +26,8 @@ export function useGraphqlMutation<
       ? [args[0], args[1], args[2]?.fetchOptions]
       : [args[0].name, args[0].variables, args[0].fetchOptions]
 
-  const clientContext = clientOptions.getContext
-    ? encodeContext(clientOptions.getContext())
+  const clientContext = clientOptions.buildClientContext
+    ? encodeContext(clientOptions.buildClientContext())
     : {}
 
   return performRequest<R>('mutation', name, 'post', {

src/runtime/composables/useGraphqlQuery.ts

@@ -32,8 +32,8 @@ export function useGraphqlQuery<
           args[0].graphqlCaching,
         ]
 
-  const clientContext = clientOptions.getContext
-    ? encodeContext(clientOptions.getContext())
+  const clientContext = clientOptions.buildClientContext
+    ? encodeContext(clientOptions.buildClientContext())
     : {}
 
   return performRequest<R>(

src/runtime/composables/useGraphqlUploadMutation.ts

@@ -80,8 +80,8 @@ export function useGraphqlUploadMutation<
 
   const formData = createFormData(variables)
 
-  const clientContext = clientOptions.getContext
-    ? encodeContext(clientOptions.getContext())
+  const clientContext = clientOptions.buildClientContext
+    ? encodeContext(clientOptions.buildClientContext())
     : {}
 
   return $fetch<GraphqlResponse<R>>(getEndpoint('upload', name), {

src/runtime/types.ts

@@ -39,8 +39,8 @@ export type GraphqlClientOptions<T extends ContextType = ContextType> = {
    *
    * The method should return an object whose properties and values are strings.
    * This object will be encoded as a query param when making the request to
-   * the GraphQL middleware. Each property is prefixed in the request to
-   * prevent collisions with query variables.
+   * the GraphQL middleware. Each property name is prefixed when converted to a
+   * query param to prevent collisions.
    *
    * On the server, the context is reassembled and passed to methods in custom
    * server options such as getEndpoint or serverFetchOptions.
@@ -53,14 +53,31 @@ export type GraphqlClientOptions<T extends ContextType = ContextType> = {
    *
    * ```typescript
    * export default defineGraphqlClientOptions({
-   *   getContext() {
+   *   buildClientContext() {
+   *     // Pass the current language as context.
    *     const language = useCurrentLanguage()
    *     return {
    *       language: language.value,
    *     }
    *   },
    * })
    * ```
+   *
+   * Now when a GraphQL query is made with useGraphqlQuery the request URL will
+   * look like this:
+   * `/api/graphql_middleware/myQuery?queryVariable=foo&__gqlc_language=en`
+   *                                                   ^ your context
+   *
+   * Then in your serverOptions file, you can then access the context:
+   *
+   * ```typescript
+   * export default defineGraphqlServerOptions({
+   *   graphqlEndpoint(event, operation, operationName, context) {
+   *     const language = context?.client?.language || 'en'
+   *     return `http://backend_server/${language}/graphql`
+   *    },
+   * })
+   * ```
    */
-  getContext?: () => T
+  buildClientContext?: () => T
 }