Manage NextJS apollo session.

[tjennt]

Manage NextJS apollo session.

Hello All!

• I am using NextJS as a storefront.

• I am using graphQL 'addItemToOrder' to add products to order.

• When successfully added I use graphQL 'activeOrder' to get that order data (everything works fine).

• When I reload the page and request to graphQL 'activeOrder' to get order data, it returns null.

• I have researched and got the information need to configure the session in Apollo, this is what I did, but everything still not working, give me advice if you know how to handle it, many thanks.

• https://www.vendure.io/docs/storefront/managing-sessions/

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
      uri: process.env.NEXT_PUBLIC_DOMAIN_API,
      cache: new InMemoryCache(),
      credentials: 'include',
});

export default client;

[michaelbromley]

The basic problem is that the session token is not being correctly communicated. If you are using the "cookie" method (which is the default), then you might be running into sameSite cookie issues (if so, you should see a warning in your browser console).

If you are using the "bearer" method, you need to do some work on your client side to handle the bearer token and include it in all requests once you receive it.

[tjennt]

Thanks a lot, I did it, have a nice day!

[HarunKilic]

Another gotcha. If you're using bearer, remember to store in cookies. As SSR can't access localstorage.

[tjennt]

This is what i did to make it work.

import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import unfetch from "isomorphic-unfetch";

const link = createHttpLink({
  uri: process.env.NEXT_PUBLIC_DOMAIN_API,
  credentials: "include",
  fetchOptions: {
    mode: "cors",
    withCredentials: true
  },
  fetch: async (url, init) => {
    const headers = {
      ...init,
      headers: {
        ...init.headers,
        "Access-Control-Allow-Origin": "*",
      },
    };
    const response = await unfetch(url, headers);
    return response;
  },
});

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  ssrMode: typeof window === "undefined",
});

export default client;