阿波罗客户端重新获取查询

Question

我有一个带有物品的购物车，可以选择删除您选择的物品，效果很好，您无需刷新页面即可查看结果，但如果您只将 1 件物品添加到购物车并尝试删除该物品，它将不会除非您刷新页面，否则不会删除.. 无法理解为什么要获得一些提示。

我控制台记录了购物车信息，如果有超过 1 个项目，它将删除并控制台，但如果只有一个，它不会记录并且不会删除。 （再次，只有当我刷新）

删除产品突变 -

const [deleteProduct, { loading: deleteLoading, error: deleteError }] =
    useMutation(DELETE_FROM_CART, {
      variables: { productId, userId: cart?.userId },

      refetchQueries: [
        {
          query: GET_USER_CART,
          variables: { userId: cart?.userId },
          awaitRefetchQueries: true,
        },
      ],
    });

GET_USER_CART：

const GET_USER_CART = gql`
  query ($userId: ID!) {
    getUserCart(userId: $userId) {
      userId
      cartProducts {
        productId
        size
        productPrice
      }
    }
  }
`;


      const { data: cartData, loading: cartLoading } = useQuery(GET_USER_CART, {
    variables: { userId: userInfo?.id },
  });

还尝试更新缓存而不是重新获取查询，但结果相同

  const [deleteProduct, { loading: deleteLoading, error: deleteError }] =
useMutation(DELETE_FROM_CART, {
  variables: { productId, userId: cart?.userId },
  update(cache, { data }) {
    const updatedCart = data?.deleteProductFromCart;
    const existCart = cache.readQuery({
      query: GET_USER_CART,
      variables: { userId: cart?.userId },
    });
    if (existCart && updatedCart) {
      cache.writeQuery({
        query: GET_USER_CART,
        variables: { userId: cart?.userId },
        data: {
          getUserCart: { ...existCart.getUserCart, updatedCart },
        },
      });
    }
  },
});

Answer 1

有多种方法可以从缓存中删除已删除的数据。

1. 重新获取查询

const [deleteProduct, { loading: deleteLoading, error: deleteError }] =
    useMutation(DELETE_FROM_CART, {
      variables: { productId, userId: cart?.userId },

      refetchQueries: [
        {
          query: GET_USER_CART,
          //Make sure that variables are the same ones as the ones you used to get GET_USER_CART data. If it is different, it wont work. Check if your variables are the same on useQuery you called before and this query
          variables: { userId: cart?.userId },
          awaitRefetchQueries: true,
        },
      ],
    });

2. 重取。 当您使用 useQuery 时，您可以稍后使用 refetch 来重新获取数据。

const {data, loading, error, refetch} = useQuery(GET_USER_CART, {variables: {}})

const [deleteProduct, { loading: deleteLoading, error: deleteError }] =
    useMutation(DELETE_FROM_CART, {
      variables: { productId, userId: cart?.userId },
onComplete: (data) => {
//call refetch here. 
refetch()
}
    });

3. 更新缓存

const [deleteProduct, { loading: deleteLoading, error: deleteError }] =
   useMutation(DELETE_FROM_CART, {
     variables: { productId, userId: cart?.userId },
   update(cache, { data }) {
     cache.modify({
       fields: {
         getUserCart(existingCart, { readField }) {
           if (data) {
   //If your existingCart is an object, then use something else instead of filter. I am assuming that your getUserCart returns an array
             return existingCart.filter(
               (taskRef) => data.deleteProductFromCart.id !== readField("id", taskRef)
             );
           }
         },
       },
     });
   },
   });