reactjs - React Apollo Client Resolver 没有从缓存中接收数据

Question

我有一个 Playground React-App 来显示我正在迁移到 Apollo Cache 的待办事项。我面临的问题是我想在我的客户端上创建一个“中间 graphql 层”来处理客户端缓存上的操作。

问题

我有一个名为getItemCount的概念验证查询，它返回缓存内项目数组中存储的条目数。

在客户端解析器函数中，我使用cache对象来读取查询 ( cache.readQuery<any>(...))。这似乎总是返回一个长度为零的对象，而不是存储在缓存中的实际数组。

我想做的事

我想查询客户端解析器中的 apollo 缓存，以执行与本地状态相关的业务逻辑，并以自定义 graphql 查询的形式提供它。这种方法的目标是简化相同应用程序的其他开发人员的适应和重用。

评论

我正在使用 Apollo DevTools 在运行时检查我的应用程序和查询执行行为。

查询似乎在 items 数组被其他业务逻辑完全填充并存储在缓存中之后调度。我可以使用 DevTools 扩展查看存储在缓存中的项目。

此外，还有其他逻辑从缓存中检索项目，并且它们按预期工作。

源代码

我按照Apollo Fullstack 教程的部分内容创建了一些自定义客户端解析器。

import gql from "graphql-tag";
import { ApolloCache } from "apollo-cache";
import { Resolvers } from "apollo-client";

export const typeDefs = gql`
  type ToDoItem {
    userId: Int!
    id: Int!
    title: String!
    completed: Boolean!
  }

  extend type Query {
    test: String!
    getItemCount: Int!
  }
`;

type ResolverFunction = (
  parent: any,
  args: any,
  { cache }: { cache: ApolloCache<any> }
) => any;

//this can contain as many resolver functions as possible
interface ResolverMap {
  [field: string]: ResolverFunction;
}


interface ClientResolvers extends Resolvers {
  Query: ResolverMap;
}

export const resolvers: ClientResolvers = {
  Query: {
    test(parent: any, _: any, { cache }) {
      return "Hello, World!";
    },
    getItemCount(parent: any, _: any, { cache }) {
      const GET_ITEMS = gql`
        query GetItems {
          items
        }
      `;

      const data = cache.readQuery<any>({
        query: GET_ITEMS,
      });

      if (!data) {
        return -1;
      }

      return data.items.length;
    }
  }
};

在 App.tsx 文件中，我最初是这样填充缓存的。

import React from "react";
import { ApolloClient, HttpLink } from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";
import { InMemoryCache } from "apollo-cache-inmemory";
import { typeDefs, resolvers } from "./Clients/ClientResolvers";

const apolloClient = new ApolloClient({
  link: new HttpLink({
    uri: ""
  }),
  cache: new InMemoryCache({
    addTypename: false
  }),
  typeDefs,
  resolvers
});

apolloClient.writeData({
  data: {
    searchValue: "",
    items: [
      {
        id: -1,
        userId: 2,
        title: "test",
        completed: true
      }
    ]
  }
});

//...

useApolloClient()我有一个自定义钩子，它通过用于写入和利用useQuery用于读取来检索客户端，从而在缓存中读取和写入项目数据。这按预期工作。

但是，当我对我的自定义解析器查询（实际上可以工作，请注意示例查询“测试”）进行 graphql 调用时，getItemCount 查询始终返回零。这向我表明，解析器可以很好地找到缓存对象本身，它总是解析为空。

标签： reactjscachingreact-apolloapollo-client