next.js 下一个.js:React Apollo客户端不发送cookie?

91zkwejq  于 2023-03-02  发布在  React
关注(0)|答案(1)|浏览(119)

我正在使用Apollo Client作为我的next.js应用程序上的graphql客户端,下面是为我创建客户端的函数:

let client: ApolloClient<any>;

export const __ssrMode__: boolean = typeof window === "undefined";
export const uri: string = "http://localhost:3001/graphql";

const createApolloClient = (): ApolloClient<any> => {
  return new ApolloClient({
    credentials: "include",
    ssrMode: __ssrMode__,
    link: createHttpLink({
      uri,
      credentials: "include",
    }),
    cache: new InMemoryCache(),
  });
};

令人惊讶的是,当我对graphql服务器进行修改时,我可以设置cookie,但是我不能从客户端获取cookie。可能是什么问题呢?

5f0d552i

5f0d552i1#

我遇到了同样的问题,我的解决方案是在每次进行服务器端渲染时创建一个客户端,也许让客户端在浏览器中执行GraphQL调用并在服务器中执行其他调用并不理想,但这对我来说是最有效的。

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
import { NextPageContext } from 'next';
import { setContext } from '@apollo/client/link/context';

export const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
  credentials: 'include',
});

const CreateClient = (ctx: NextPageContext | null) => {
  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        cookie:
          (typeof window === 'undefined'
            ? ctx?.req?.headers.cookie || undefined
            : undefined) || '',
      },
    };
  });

  return new ApolloClient({
    credentials: 'include',
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
    ssrMode: true,
  });
};

export default CreateClient;

所以,我所做的就是从getServerSideProps传递上下文,看看那里是否有一些cookie,如果有的话,我就设置cookie,如果cookie中有授权令牌,你也可以发送它。

export async function getServerSideProps(context: NextPageContext) {
  const client = CreateClient(context);

  const { data } = await client.query({
    query: SOME_QUERY,
  });

  return {
    props: {
      data,
    },
  };
}

你也可以像Ben Awad教程Apollo Client HOC中那样做一个HOC,但我认为这对我想做的事情来说太多了。希望它对你有帮助或对那里的人有帮助:)
此外,我使用的是Next 12.1.5和React 18

相关问题