N

Nuxt•2y ago

chris.violette

Adding query strings to Apollo GraphQL requests

I am working on a Nuxt 3 site using the Nuxt Apollo (https://apollo.nuxtjs.org/) GraphQL module. This is set up to query the backend (Craft CMS) for content and so far has been working well.

I am now trying to get live previews working. From the Craft CMS side, when a user tries to preview changes, it adds a

token=abc123

token=abc123

query string to the entry URL. This token should then be added to posts to the GraphQL API endpoint to allow querying for draft content.

The issue I'm running into is how to hand off that

token

token

parameter from the initial

GET

GET

request, if it exists, to the Apollo client.

For client-side requests, I've been proxying the GraphQL endpoint through an

/api/graphql

/api/graphql

Nuxt server route, forwarding the request on to the 3rd party server. Doing that, I've been able to modify the endpoint URL with that token. However, I have not figured out how I can do the same for server-side requests, as they go directly to the 3rd-party endpoint.

Relative URLs don't appear to work with the Apollo module for SSR (https://github.com/nuxt-modules/apollo/issues/610), so I haven't been able to figure out how I could intercept/modify/proxy those requests the same as I do for client-side queries.

Any ideas would be welcome. I feel like I'm very close to solving, but with most of the data fetched server-side, I need to make it work with those requests.

GraphQL integration for Nuxt · Docus

The best place to start your documentation.

GitHub

Issues · nuxt-modules/apollo

Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL. - Issues · nuxt-modules/apollo