如何在不使用 useMutation 的情况下在 Next.js 中使用 GraphQL 突变

Question

我正在使用 Next.js 版本 9.3.0 和 GraphQL 开发代码库。为了获得 Next.js 优化的好处，我们将每个页面包装在 withApollo 中，因此在页面内部我们可以使用 useQuery、useMutation。我面临的问题是我需要在页面外的 Header component 中使用突变，该页面无法访问 ApolloClient 因为应用程序未包含在 withApollo 中.

我得到的错误是 Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.

Header 组件位于 Layout 组件内部，如下所示：

<>
   <Meta />
   <Header/>
   {children} // pages which are composed with withApollo
   <Footer />
</>

而不是在组件中使用 useQuery 没有 withApollo 很容易你可以使用

import { createApolloFetch } from 'apollo-fetch';

const fetch = createApolloFetch({
    uri: process.env.GRAPHQL_SERVER,
});

const userInfoQuery = `{
    userInfo {
        loggedIn
        basketCount
        wishListCount
    }
}`;

const userInfoData = fetch({
      query: userInfoQuery,
});

在不由 withApollo 组成的组件中是否有 useMutation 的替代解决方案？

欢迎提出任何建议，干杯

Answer 1

愚蠢的我，突变也适用于 Apollo fetch

https://github.com/apollographql/apollo-fetch#simple-graphql-mutation-with-variables 但这不再维护

最终对我有用的解决方案是 useMutation 并将客户端传递给它。 https://www.apollographql.com/docs/react/data/mutations/#usemutation-api

import { useMutation } from '@apollo/react-hooks';
import createApolloClient from 'lib/apolloClient';
import loginUser from 'mutations/login';

const [getToken, { data: mutationData, error: loginErrors, loading }] = useMutation(loginUser, { client: createApolloClient()});

如何在不使用 useMutation 的情况下在 Next.js 中使用 GraphQL 突变

How to use GraphQL mutation in Next.js without useMutation

reactjs

graphql

next.js

apollo-client

graphql-mutation