-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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
SSR - Send request with cookie from apollo client with Next.js #5089
Comments
Here's my modification of the official nextjs example, which passing the cookie from nextjs ctx to fetch on ssr.
|
I had the same issue with Next.Js. Tried to resolve it and no way, started feeling something was wrong with apollo, till I tried it against FusionJs and it just works |
my problem was because of the bad configuration of CORS on my server. after I configured it correctly it works fine. |
Hey did you manage to fix this problem? I'm having the same issue. I'm using graphql yoga as my server. This works fine in localhost but in production the cookie is not being sent in ssr. btw I have Configured SSL in my server maybe that has something to do with this. |
I added Cors in my server configuration |
Can you specify what exact Cors settings on the server did you set up? I'm having the same exact issue for over a month. Works in localhost, not after deploy. Tried a bazillion cors settings. |
what is your server? |
Omg after struggling with this issue for more than a month, I finally found the solution. The cors settings where fine. But in my mutation when setting the cookie you have to specifically set in
|
Hi @chemicalkosek This is how i set up cookie that's the CORS configuration |
Not sure, if you're using |
Yes I use https. |
I see you are getting cookie via ctx.req.headers.cookie, can you also please show some example how in component you can set cookie to be accessible like this? I've just tried to use kind of setting cookie, but then the cookie is just available after refresh / swith between sites. So, therefore immeditaly after I do log-in it does not set header with cookie, but after you refresh or switch site (when apollo is reinitalized). I used for example: const { myCookie } = cookies(ctx); (trying to get cookie), but as I said it was not available (also not in setContext). Is there any solution? |
@nadzic There are no headers on the client side, so you can't access them. You need to somehow use |
The newest nextjs example works with a seperate apolloClient.js file. Modified it like so (based on mzygmunt's code).
|
@derozan10 Can you point which nextjs example are you referring to. |
|
Thanks! Does anybody know if this already works out of the box with https://github.com/lfades/next-with-apollo, i have forwarded cookie headers explicitly but still seems SSR doesn't behave correctly
|
@mjurincic You'll need to pass
|
Thanks, I didn't mention I'm already passing |
Hi @mjurincic: did you figure out the issue? |
@derozan10 's and @mzygmunt code works with NextJs + Graphql Yoga + Prisma I also changed my CORS options on the backend ...
const cors = require("cors");
const server = createServer();
var corsOptions = {
origin: process.env.FRONTEND_URL,
credentials: true
};
server.express.use(cors(corsOptions));
... I also updated the dependencies until I could reach a 'no yarn warning' state "dependencies": {
"@apollo/react-hooks": "^3.1.5",
"@apollo/react-ssr": "^3.1.5",
"@babel/core": "^7.1.2",
"@types/react": "^16.8.0",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.9",
"apollo-link-http": "^1.5.17",
"apollo-utilities": "^1.3.2",
"graphql": "14.3.1",
"graphql-tag": "^2.10.3",
"isomorphic-unfetch": "^3.0.0",
"next": "latest",
"prop-types": "^15.6.2",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"babel-plugin-graphql-tag": "^2.5.0"
} |
I've tried the withapollo examples here with a separate createApollo and without. Either way I get headers undefined on login.js section
|
@ODelibalta what does the |
I changed the line
to
and it works. Here is the full
and the
|
@mzygmunt How do you combine this with export async function getServerSideProps(context) {
const myVars = {
orderId: context["params"]["order"]
}
return {
props: {
myVars: myVars,
},
}
} |
I successfully solved this problem in nextjs, it is actually very simple, just need to pass ctx in the
|
@codingcn Your config almost worked for me. I just couldn't make it work for SSR but it definitely works with Client side for me on production. |
@codingcn @shoaibsharif My implementation is also the exact same. Curious about one difference I noticed with
Pretty sure you can remove ctx param here as context is only passed when |
Those changes are working at my side to send the The full
The
|
From @codingcn 's code, there is an issue when you use full SSR, that used Here is the patch for the code: const authLink = setContext((req, {headers}) => {
const clientSideToken = getCookie('accessToken',ctx.req); // Use your regular method to get token from client side
if(!accessToken) accessToken = clientSideToken;
return {
headers: {
...headers,
authorization: accessToken ? `Bearer ${accessToken}` : "",
}
}
}); |
Please add cookies from your route and get cookie from your init route and pass it into props. I hope it will work. Or show your auth.js file code. |
I'm pretty much using the same setup used here https://github.com/vercel/next.js/tree/canary/examples/with-apollo except I get an auth token and set it up in the headers when creating the ApolloClient as shown below. I'm running into the same issue others have expressed where the authCookie below is coming back as For auth and how the cookie is set basically what happens is I'm using Auth0 and Auth0 redirects to a signed-in.js page that sets the cookie and then redirects using Next.js Router to the index.js page.
|
Hi all, I'm doing a bit of housekeeping. Since the most recent activity on this issue is more than a year old and there's no clear action to be taken by the maintainers, I'll close this for now. Happy to re-open if anyone feels strongly that there's a code or documentation update that should be made. Also feel free to post to our community forum. Thanks so much! |
This should not be closed because the solutions provided are not adequate. |
Hi @wwwhatley 👋🏻 can you share more details about your use case and expected vs. actual behavior? |
We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support. Thank you! |
please help, I tried all the examples and also other tutorials on the internet but no luck to fix the problem.
I am using apollo client to get the data and I am using a cookie or Bearer (which one works) for authentication but in the first request and after every refresh, it is sending request with no cookie or Bearer in it, and my API rejects the request but in the second request which it happen immediately (automatically by app NOT user) after the first one it includes cookie and Bearer on it.
I think:
I tried to force the component to render just in client-side but no luck on it
here is init-apollo.tsx file:
here is my withApollo.tsx code:
and _app.tsx file:
My Component:
The text was updated successfully, but these errors were encountered: