Question

下面给出的查询将获取产品列表并将其存储在阿波罗客户端本地缓存中。它为每个产品检索products的列表和images的列表

const GET_PRODUCTS_QUERY = gql`
  query Products($cursor: String, $query: String, $imageCount: Int = 100) {
    products(first: 9, after: $cursor, query: $query) {
      edges {
        cursor
        node {
          id
          selected @client
          title
          description
          images(first: $imageCount) {
            edges {
              node {
                id
                originalSrc
                selected @client
              }
            }
          }
        }
      }
    }
  }
`;

我有一堆products和selected: true，并且每个产品都会有一个或多个images和selected: true。

GET_PRODUCTS_QUERY组件正在使用ProductsList组件来获取产品并进行渲染。一切正常。当用户选择某些产品时，selected在本地缓存中被标记为true，而ProductsList组件将重新呈现。到现在为止还挺好。

我还有另一个组件，需要使用相同的GET_PRODUCTS_QUERY来获取产品，但只能从缓存中获取。该组件应侦听缓存中的产品列表，并且每当缓存中发生某些更改时，都应重新呈现。我尝试以下操作均无济于事

export default () => {
  const { data: productsData = {} } = useQuery(GET_PRODUCTS_QUERY, { fetchPolicy: "cache-only" });
  const { selectedProducts = [] } = productsData;
  //Render selected products
}

在初始渲染期间，将执行查询，并且未按预期返回任何内容。

在ProductsList提取产品列表并填充缓存后，我希望在侦听查询时调用render函数，但是没有发生
我通过更改其他一些道具来手动影响渲染，以便触发useQuery。但是尽管有缓存，但仍然没有从缓存中获得任何产品。

任何人都可以解释一下我在哪里出错了吗？

Answer 1

您要获取两个不同的查询-您不仅需要确保查询相同，而且还要确保传递给两个钩子的变量也相同。

这样想。例如，当您提取20种产品

products(first: 20)

Apollo将结果存储在缓存中时将其标准化。每个产品分别存储并分配一个密钥。然后，products字段与那些键相关联。但是，假设您随后查询了21种产品：

products(first: 21)

如果Apollo忽略了传递给该字段的参数值，则将其视为缓存命中，仅返回与先前查询关联的20个产品。幸运的是，它没有那样做。每个键列表不仅与该字段关联，而且还与提供给该字段的参数关联。如果参数更改，并且该参数组合尚未在缓存中，则Apollo知道需要从服务器获取数据。

无法使用useQuery挂钩获取包含某些@client变量的远程查询的数据

1 个答案: