Newbie question: can this be used for browser-side Apollo queries/mutations too?

[therealgilles]

I'm trying to use this package on a new project. I am wondering if it can be used for browser-side Apollo queries/mutations too. The RFC mentioned providing a useApolloClient() hook but I don't see one available from this package.

In my scenario, I need:

1. An RSC Apollo client for static generation, using client/password authentication to retrieve data.
2. A "client" Apollo client for user queries/mutation, using credentials (cookie authentication). This client would be mostly used on the browser, but I guess during SSR too.

(1) is working as expected, but (2) is not. Despite the ApolloWrapper, Apollo is complaining there is no ApolloProvider. If I try to use useQuery(), I see it's making graphql request to localhost instead of the URL I configured. Meaning it looks like it's using an non-configured client.

What am I missing? Help and advice welcome.

[therealgilles]

Ah it looks like I tried to use process.env.SERVER_GRAPHLQ_URL inside ApolloWrapper and it didn't get transformed into the proper URL. Still curious about the useApolloClient() hook though, as I need the client to run client.clearStore().

[phryneas]

At this point, you should be able to use all hooks just directly from @apollo/client. In the past, some of the hooks needed to be imported from "@apollo/experimental-nextjs-app-support/ssr", but that's not the case any more.
As long as you use the NextSSRApolloClient with the ApolloNextAppProvider, all hooks should work just like you expect them to.

[therealgilles]

After fixing the URL, it started working as expected. I also discovered I can get the client in queries/mutations result. Not sure if possible, but a check to make sure the URL is not empty would be useful. The error messages I got did not point me there.

One thing that's not completely clear to me if whether credentials (auth cookies for instance) would work during SSR, but I'm guessing they should?

[phryneas]

You would manually need to "forward" auth cookies during SSR.
You'd need to access the cookies during RSC (SSR cannot access them), pass them into a prop to your ApolloWrapper component, and protect them with https://github.com/phryneas/ssr-only-secrets so they don't leak into the browser.

[therealgilles]

@phryneas Thank you for the answer and pointer.

PS: The README file of ssr-only-secrets has a few inconsistencies, with missing await call, SECRET_MY_VAR in the wrong spot or missing in the function call.

[phryneas]

The README file of ssr-only-secrets has a few inconsistencies, with missing await call, SECRET_MY_VAR in the wrong spot or missing in the function call.

PRs to fix things like that up are very welcome! I just put up the library to help people, but it's not very polished.

[SheshoVega]

graphql request to localhost instead of the URL

hi, how could you fix the URL, I have the same issue, if I use environment variables in ApolloWrapper when configuring HttpLink like this:

const httpLink = new HttpLink({ uri: process.env.GRAPHQL_URL, headers: { authorization: Bearer ${process.env.TOKEN}, }, fetchOptions: { cache: "no-store" }, });

same problem with my token, but if I hard code the variables everything works fine.

[therealgilles]

Assuming you are using NextJS, a process.env.VAR variable will only be made available client-side (or more precisely replaced during transpiling) if VAR has a NEXT_PUBLIC_ prefix, so name your variable NEXT_PUBLIC_TOKEN or something alike.

See: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser

[SheshoVega]

@therealgilles thanks so much for the clarification.

[therealgilles]

Closing as answered.

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.