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
              }
            }
          }
        }
      }
    }
  }
`;

返回的数据用于呈现用户可以选择任意数量产品的 UI。我正在使用以下突变将产品标记为选中

(_root, variables, { getCacheKey, cache }) => {
  const id = getCacheKey({
    __typename: "Product",
    id: variables.id
  });
  const fragment = gql`
    fragment toggleSelected on Product {
      selected,
    }
  `;
  const data = cache.readFragment({
    id,
    fragment
  });
  cache.writeData({
    id,
    data: {
      ...data,
      selected: !data.selected
    }
  });

上述突变工作正常，并且selected标志出现在product缓存中的相应位置。现在我有一个要求，当一个产品被选中时，它的第一张图片也应该被标记为选中，而不需要用户进行任何手动操作。在这种情况下，我没有图像的 ID。我只知道无论所选产品的第一张图片是什么，都应该将其标记为已选中。我怎样才能实现这一目标？如果我有 id，我想我将能够在 Image 对象上创建一个片段并对其进行变异。

4

0 回答 0