Apollo Client + Next.js 不发送非 SSR 请求

Question

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

export function createApolloClient(ssrMode = typeof window === 'undefined') {
  return new ApolloClient({
    ssrMode,
    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>
  );
}

这对于服务器端请求来说没问题，我可以检索结果。问题是非 SSR 请求，例如下面的请求，我得到 没有响应，实际上当我使用 Dev Tools 检查时没有发送请求。

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

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

Answer 1

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

Apollo Client + Next.js 不发送非 SSR 请求

Apollo Client + Next.js not sending non-SSR requests

javascript

typescript

graphql

next.js

apollo-client