Apollo Client not sending cookies to backend server on localhost

Help
,
1

Hi guys,

I’m using “@apollo/experimental-nextjs-app-support/ssr” in Next App router, in some “use client” components and trying to interface with my Keystone backend server.

I know the sign in mutation works because it returns the User object and I can view it in the Apollo Cache, however, although it creates a session cookie, Apollo does not seem to be sending the session cookie to the serverside when I try to authenticate the user.

I believe the

credentials: "include"

flag is what enables sending out headers/cookies right? Maybe I put it in the incorrect place or misconfigured it? Since I’m using this with Nextjs 13, I used the experimental-nextjs-app-support package, which I’m less familiar with so could it be that I misconfigured something there?

I used it like this:

const makeClient = () => {
  const httpLink = new HttpLink({
      uri: "http://localhost:3000/api/graphql",
  });

  return new ApolloClient({
    cache: new NextSSRInMemoryCache(),
    connectToDevTools: true,
    credentials: 'include',
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });
}

Anyone have any idea that can help? This is all in localhost dev environment btw. Thanks in advance!

2

Hi @mcds :wave: welcome to the forum!

The credentials option in the ApolloClient constructor is there for convenience. ApolloClient will instantiate a new link if there’s none provided. That’s where the credentials option comes in handy:

Since you’re passing a link to the constructor, try moving credentials: "include" to the HttpLink options:

  const httpLink = new HttpLink({
      uri: "http://localhost:3000/api/graphql",
      credentials: "include",
  });

Hope that helps!

3

I have the same problem, but in server components.
On the server in the request I receive cookies: {}.
Help me please

code:

import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
import { HttpLink, from } from "@apollo/client";
import {
  NextSSRInMemoryCache,
  NextSSRApolloClient,
} from "@apollo/experimental-nextjs-app-support/ssr";

/*
 * For server components
 */
export const { getClient } = registerApolloClient(() => {
  const httpLink = new HttpLink({
    uri: "http://127.0.0.1:3000/graphql",
    credentials: "include",
  });

  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link: from([ httpLink]),
  });
});
5

I have the same problem

6

In the case of server components you would have to take the cookies off the incoming request by calling cookies() and then manually add them to the outgoing request.

Next.js doesn’t “forward” headers for you for anything happening on the server.

That could look something like this:

export const { getClient } = registerApolloClient(() => {
  const httpLink = createHttpLink({
    uri: "/graphql",
  });

  const authLink = setContext((_, { headers }) => {
    const token = cookies().get("myCookie");
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
      },
    };
  });

  return new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });
});