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。我的意图是查询本地 GraphQL 缓存，并检索所有产品及其图像，以便我可以根据selected标志过滤它们

这是我到目前为止所尝试的。

我在下面写了查询

export const GET_SELECTED_PRODUCTS = gql`
  {
    selectedProducts @client
  }
`;

我在创建 ApolloClient 时在该部分中编写了上述查询的定义，resolvers如下所示

{
  Query: {
    selectedProducts(root, variables, { cache }) {
      let data = [];
      try {
       //Is this the right way to query the cache??
        const results = cache.readQuery({
          query: gql`
            query Products {
              products {
                id
                selected @client
                images(first: 100) {
                  edges {
                    node {
                      id
                      originalSrc
                      selected @client
                    }
                  }
                }
              }
            }
          `
        });

        //code to filter selected products

        data = results.data;
      } catch (ex) {
        console.error(ex);
      }
      return data;
    }
  }
}

我正在尝试在组件中使用上述查询，如图所示

export default () => {
  const { data: productsData = {} } = useQuery(GET_SELECTED_PRODUCTS);
  const { selectedProducts = [] } = productsData;
  //Render selected products
}

缓存被产品填充（通过执行GET_PRODUCTS_QUERY）存在一些网络延迟。因此，当组件首次呈现时，GET_SELECTED_PRODUCTS会抛出错误（如预期的那样），因为产品尚未在缓存中。一旦产品在缓存中，selected当用户点击产品时，产品对象上就会发生一些变化（将字段标记为真）。我的印象是，当这种突变发生时，useQuery 挂钩再次执行GET_SELECTED_PRODUCTS查询以获取最新更新。但这并没有发生。当产品对象发生变化时，如何连接组件以更改和获取最新的查询结果？

4

0 回答 0