Apollo GraphQL缓存问题(cacheRedirects和readFragment)

我是Apollo和Apollo缓存的新手。我一直在写demo project,遇到了两个问题:

  1. 无法使cacheRedirects正常工作:

在我的演示中,我“全部加载” COVID19测试数据,该数据查询API并返回3个国家(包括加拿大)的结果数组。然后,我尝试加载单个结果(“加载加拿大”)以使其使用我的cacheRedirects解析器。我想我已经正确设置了此设置,但是它总是返回到API进行查询,而不是从缓存中读取。

这是我的带有缓存的Apollo客户端:

const client = new ApolloClient({
  uri: "https://covid19-graphql.now.sh",cache: new InmemoryCache({
    dataIdFromObject: obj => {
      console.log("in cache: obj:",obj);
      let dataId = null;
      switch (obj.__typename) {
        case "Country":
          dataId = obj.__typename + "_" + obj.name;
          break;
        default:
          dataId = defaultDataIdFromObject(obj);
      }
      console.log("in cache: dataId:",dataId);
      return dataId;
    },cacheRedirects: {
      Query: {
        country: (_,args,{ getcacheKey }) => {
          console.log("in cacheRedirects:",_,args);
          const cacheKey = getcacheKey({ __typename: "Country",...args });
          console.log("cacheKey:",cacheKey);
          return cacheKey;
        }
      }
    }
  })
  // connectToDevTools: true
});
  1. 我不知道如何执行readFragment

我在这段代码中尝试了许多不同的配置,但是我没有得到任何结果。

这是我的职能:

const ReadFragment = () => {
  console.log("in ReadFragment");
  try {
    const data = client.readFragment({
      id: GET_DATA.countryData,fragment: gql`
        fragment mostRecent on country {
          id
          text
          complete
        }
      `
    });
    if (data) {
      console.log(data);
      return (
        <div>
          From Fragment: {JSON.stringify(data)}
        </div>
      );
    } else {
      return <div>From Fragment: not found</div>;
    }
  } catch (error) {
    // console.error(error);
    return <div>From Fragment: not found</div>;
  }
};

奖金问题:我似乎无法获得Apollo客户端开发人员工具扩展,无法在Chrome浏览器中使用。这仍然有效吗?我的代码似乎从未连接到它。 (取消注释connectToDevTools: true。)似乎能够检查缓存的内容对于开发和学习非常有用。还有查看缓存内容的另一种方法吗?

okraa 回答:Apollo GraphQL缓存问题(cacheRedirects和readFragment)

Apollo GraphQL维护缓存本身,当然您不必-

export declare type FetchPolicy = 'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby';

如果您查看fetchPolicy声明,那么有几种选择可以实现-

  1. 仅网络

    const { data } = useQuery(GET_LIST,{
    fetchPolicy: 'network-only'
    });
    
  2. 先缓存

    const { data } = useQuery(GET_LIST,{
    fetchPolicy: 'cache-first'
    });
    
  3. 仅缓存

    const { data } = useQuery(GET_LIST,{
    fetchPolicy: 'cache-only'
    });
    

类似地,还可以根据需要查看其余选项。

如果您想维护状态并进行某种工作,则为这些查询编写解析器-

const client = new ApolloClient({
  uri: apollo.networkInterface,cache,resolvers: {
    Mutation: {
        searchQuery: (launch,_args,{ cache }) => {
            console.log(cache); // cache can be queried here
            // read from cache if planning to modify the data
            //const { searchQuery } = cache.readQuery({ query: GET_LIST });
            cache.writeQuery({
                query: GET_LIST,data: {searchQuery:_args.searchQuery}
              });
          },},})

Chrome客户端可以正常工作,但是必须与graphql服务器建立连接。否则它将不会显示在Chrome中。

本文链接:https://www.f2er.com/2325261.html

大家都在问