Apollo Client + Next.js 不发送非 s-s-r 请求

Posted 2023-03-08

【中文标题】Apollo Client + Next.js 不发送非 s-s-r 请求

【英文标题】：Apollo Client + Next.js not sending non-s-s-r requests

【发布时间】：2021-11-03 08:39:22

【问题描述】：

我遇到了一个问题，即只有在服务器端发出的请求才由 Apollo 客户端发送。据我了解，需要在_app 文件中为非 s-s-r 请求创建一个客户端，并在需要 s-s-r 请求时创建另一个客户端。所以我使用下面的代码来创建这些：

export function createApolloClient(s-s-rMode = typeof window === 'undefined') 
  return new ApolloClient(
    s-s-rMode,
    uri: process.env.API_ENDPOINT,
    cache: new InMemoryCache(),
  );


export function useApollo() 
  return useMemo(() => createApolloClient(false), []);

在我的_app.tsx:

function MyApp( Component, pageProps : AppProps) 
  const client = useApollo();
  // ...
  return (
    <ApolloProvider client=client>
      <Provider store=store>
        <Modal />
        <Toast />
        <Component ...pageProps />
      </Provider>
    </ApolloProvider>
  );

这对于服务器端请求来说很好，我可以检索结果。问题在于非 s-s-r 请求，例如下面的请求，当我使用开发工具检查时，我没有响应，实际上没有发送任何请求。

const [signUp,  loading ] = useMutation(SIGNUP);
const handleSubmit = () => 
   signUp(
        variables: 
          payload: 
            ...state.inputs,
          ,
        ,
      )
      .then((res)=>console.log(res),
            (err)=>console.error(err));

在这种情况下，我得到的只是 undefined 被登录。使用async/await 语法做同样的事情也没有太大变化，实际上它似乎没有到达日志。

【参考方案1】：

问题在于使用 process.env.API_ENDPOINT 创建 apollo 客户端；因为无法访问客户端的环境变量。