【问题标题】:"Found @client directives in query but no client resolvers were specified" Warning when using client cache“在查询中找到 @client 指令,但未指定客户端解析器”使用客户端缓存时的警告
【发布时间】:2019-09-22 00:39:50
【问题描述】:

我一直在关注当地的Apollo Client docs

我已经实现了一个非常简单的客户端缓存查询:

export const GET_USER_ACCOUNTS = gql`
    query GetUserAccounts {
        userAccounts @client
        name @client
    }
`;

userAccountsname 在身份验证后都存储在我的缓存中:

    <Mutation
          mutation={API_TOKEN_AUTHENTICATION}
          variables={{ apiKey }}
          onCompleted={({
              apiTokenAuthentication: {
                  token,
                  userAccounts,
                  user: { givenName, familyName },
               },
          }) => {
             localStorage.setItem('token', token);
             client.writeData({
                 data: {
                     isLoggedIn: true,
                     userAccounts,
                     name: `${givenName} ${familyName}`,
                 },
             });
         }}
    >

我已经用默认值预热了缓存:

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

const cache = new InMemoryCache();
const link = new HttpLink({
    uri: 'http://localhost:8002/v1/graphql',
    headers: {
        Authorization: `${localStorage.getItem('token')}`,
    },
});
const client = new ApolloClient({
    cache,
    link,
});
// set up the initial state
cache.writeData({
    data: {
        name: '',
        userAccounts: [],
        isLoggedIn: !!localStorage.getItem('token'),
    },
});

export default client;

我没有包含任何本地解析器,因为文档状态:

当 Apollo Client 执行此查询并尝试为 isInCart 字段查找结果时,它会运行以下步骤:

是否设置了与字段名称 isInCart 关联的解析器函数(通过 ApolloClient 构造函数 resolvers 参数或 Apollo Client 的 setResolvers / addResolvers 方法)?如果是,则运行并从解析器函数返回结果。

如果找不到匹配的解析器函数,请检查 Apollo 客户端缓存以查看是否可以直接找到 isInCart 值。如果是,则返回该值。

然而,尽管代码运行良好(它获取我想要的值没问题)我仍然收到这个警告:

在查询中找到 @client 指令,但未指定客户端解析器。您现在可以将 apollo-link-state 解析器传递给 ApolloClient 构造函数。

我误会了吗?我应该以某种方式为此添加客户端解析器吗?

任何建议表示赞赏

【问题讨论】:

    标签: javascript reactjs graphql apollo-client


    【解决方案1】:

    来自the docs

    ⚠️ 如果要使用 Apollo Client 的 @client 支持在不使用本地解析器的情况下查询缓存,则必须将空对象传递给 ApolloClient 构造函数 resolvers 选项。没有这个 Apollo Client 将不会启用其集成的 @client 支持,这意味着您基于 @client 的查询将被传递到 Apollo Client 链接链。你可以找到更多关于为什么这是必要的细节here

    换句话说,只需将一个空的解析器对象添加到您的配置中,如下所示:

    const client = new ApolloClient({
        cache,
        link,
        resolvers: {},
    });
    

    【讨论】:

    • 谢谢,我试过了,但仍然收到警告
    • 我收回了它 - 当然可以,它只是没有在我的 MockedProvider 中包含客户端,所以在我的测试中仍然收到警告。非常感谢!
    • 我可以将此作为另一个问题提出,但我在此处添加了客户端 &lt;MockedProvider mocks={mocks} addTypename={false} client={client}&gt; 并且在我的测试中仍然收到警告。请问你知道我可以在哪里插入吗?
    • Looks like resolvers 应该直接传递给MockedProvider。这是有道理的——您可能想换出解析器进行测试。
    【解决方案2】:

    正如 Daniel 后来在 comments of the above answer 中提到的,在 MockedProvider 内部传递 resolvers={{}} 对我来说非常有用。它应该是这样的:

    <MockedProvider mocks={mocks} addTypename={false} resolvers={{}}>
        <FooComponent />
    </MockedProvider>
    

    它甚至解决了我在 Circle CI 中遇到的内存泄漏问题,因为它似乎无处可解决;以下是我收到的错误消息:

    <--- Last few GCs --->
    
      154665 ms: Mark-sweep 949.1 (1434.4) -> 948.2 (1434.4) MB, 1979.3 / 0 ms [allocation failure] [GC in old space requested].
      156664 ms: Mark-sweep 948.2 (1434.4) -> 948.2 (1434.4) MB, 1999.7 / 0 ms [allocation failure] [GC in old space requested].
      158734 ms: Mark-sweep 948.2 (1434.4) -> 948.2 (1434.4) MB, 2069.7 / 0 ms [last resort gc].
      160810 ms: Mark-sweep 948.2 (1434.4) -> 948.1 (1434.4) MB, 2075.7 / 0 ms [last resort gc].
    
    
    <--- JS stacktrace --->
    
    ==== JS stack trace =========================================
    
    Security context: 0x30ab306c9fa9 <JS Object>
        2: convertPropertyValueToJson(aka convertPropertyValueToJson) [/home/circleci/project/node_modules/typescript/lib/typescript.js:24737] [pc=0x2953c91d9878] (this=0x30ab30604189 <undefined>,valueExpression=0x39effa032fa9 <a NodeObject with map 0x35eb62463c11>,option=0x30ab30604189 <undefined>)
        3: /* anonymous */(aka /* anonymous */) [/home/circleci/project/node_modules/typescript/lib/type...
    
    FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
    Aborted (core dumped)
    

    干杯!

    【讨论】:

      猜你喜欢
      • 2019-11-25
      • 2020-06-08
      • 1970-01-01
      • 2012-09-06
      • 2013-03-24
      • 2021-01-04
      • 2011-01-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多