Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: client options and client context #45

Merged
merged 13 commits into from
Nov 15, 2024
Merged

Conversation

dulnan
Copy link
Owner

@dulnan dulnan commented Nov 4, 2024

This introduces a new feature called "client options". It should make it easier to pass context information from within the Nuxt app to the GraphQL middleware on the server.

A common use case is to pass the current language along with every request to the middleware.

Currently to achieve the same you'd have to set fetchOptions via useGraphqlState() in a plugin by setting additional query params on the outgoing request.

New graphqlMiddleware.clientOptions.ts file

Similar to the existing serverOptions file, this new file can be used to define options that are used for everything non-server/nitro related. Currently a single method can be implemented called buildClientContext.

buildClientContext()

import { defineGraphqlClientOptions } from 'nuxt-graphql-middleware/dist/runtime/clientOptions'

export default defineGraphqlClientOptions<{
  language: string
  country: string
}>({
  buildClientContext() {
    const language = useCurrentLanguage()
    const country = useCurrentCountry()
    return {
      language: language.value,
      country: country.value,
    }
  },
})

This method should return an object with both string properties and values. Whenever a request to the middleware is made, this method is called and the object is passed along via query parameters:

const data = await useGraphqlQuery('loadProduct', {
  id: '123',
})

The resulting request URL:

/api/graphql_middleware/loadProduct?id=123&__gqlc_language=en&__gqlc_country=US

On the server, these query params are then extracted and converted back to an object with the same properties as returned in buildClientContext().

This context object is then passed to all serverOptions methods:

import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/dist/runtime/serverOptions'

export default defineGraphqlServerOptions({
  graphqlEndpoint(event, operation, operationName, context) {
    // Use the language from the client context.
    const language = context?.client?.language || 'en'
    return `http://backend_server/${language}/graphql`
  },
})

@dulnan dulnan merged commit 5fc2e59 into main Nov 15, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant