Apollo-CLIENT REDCECH查询

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 Refection数据。

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)
             );
           }
         },
       },
     });
   },
   });