Open therealgilles opened 1 month ago
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()
.
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.
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?
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.
@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.
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.
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.
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.
@therealgilles thanks so much for the clarification.
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 noApolloProvider
. If I try to useuseQuery()
, 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.