1

下面给出的是获取产品列表并将其存储在 apollo-client 本地缓存中的查询。它检索每个产品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
              }
            }
          }
        }
      }
    }
  }
`;

我有一堆productswith selected: true，每个产品都会有一个或多个imageswith 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 获取产品列表并填充缓存后，我希望在侦听查询时调用渲染函数，但它没有发生
  • 我通过更改其他一些道具来手动影响渲染，以便触发 useQuery。但是我仍然没有从缓存中得到任何产品，尽管它在那里。

谁能解释我在这里出错的地方？

4

1 回答 1

0

您正在获取两个不同的查询——您需要确保不仅查询相同，而且传递给两个挂钩的变量也相同。

这样想吧。例如，当您获取 20 个产品时

products(first: 20)

Apollo 将结果存储在缓存中时对其进行规范化。每个产品都单独存储并分配一个密钥。然后该products字段与这些键相关联。但是，想象一下，如果您随后查询 21 种产品：

products(first: 21)

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

于 2020-02-11T11:44:21.057 回答