react-hooks - 为什么多次网络调用读取、写入 Apollo 缓存？

Question

这是我正在从事的电子商务项目。我正在使用带有 Apollo 客户端 3 的 Nextjs 框架。在添加到购物车突变时，我正在使用读写 Apollo 缓存功能来更新购物车中的总项目，但是在写入缓存时它仍然会访问数据库。我可以看到 2 个网络调用是 -

对于 AddToCart 突变，这非常好。对于购物车查询（我认为这是错误的），因为我可以直接使用 refetchQuery 函数来做同样的事情。

import { useQuery, useMutation } from "@apollo/client";
import cookie from "react-cookies";

import {
  ALLCATEGORIES,
  SUBCATEGORIES,
  CART_QUERY,
  SESSIONID,
} from "apollo/queries";

import { CART_MUTATION } from "apollo/mutations";

var sessionid = cookie.load("sessionid");
var token = localStorage.getItem('auth');

export const useGetCategories = () => useQuery(ALLCATEGORIES);
export const useGetSessionId = () => useQuery(SESSIONID);
export const useCart = (options) => useQuery(CART_QUERY, options);
export const useProductListing = (options) => useQuery(SUBCATEGORIES, options);

export const useAddToCart = () =>
  useMutation(CART_MUTATION, {
    update(cache, { data: { addToCart } }) {
      try {
        const data = cache.readQuery({
          query: CART_QUERY,
          variables: {
            sessionId: sessionid,
            token: token,
          },
        });
        cache.writeQuery({
          query: CART_QUERY,
          variables: {
            sessionId: sessionid,
            token: token,
          },
          data: {
            cart: [data.cart, addToCart],
          },
        });
      } catch (error) {
        console.log("error", error);
      }
    },
  });



import styled from "styled-components";
import Rup from "../../icons/rupee.svg";
import ProductImage from "public/product.png";
import { fontWeight, flexbox, fontSize } from "@/styles/global-styles";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { useAddToCart } from "apollo/actions";
import cookie from "react-cookies";
import Loading from "@/components/loader";

const Products = ({ products }) => {
  var sessionid = cookie.load("sessionid");
  const [addToCart, { loading }] = useAddToCart();

  const handleAddToCart = async (uuid) => {
    await addToCart({
      variables: {
        sessionId: sessionid,
        product: uuid,
        quantity: 1,
        monogram: "",
        monogramType: "",
      },
    });
  };

  if (loading) return <Loading />;

  return (
    <>
      <ProductContainer>
        {products.map((product, index) => {
          return (
            <ProductCard key={index}>
              <Badge>Our Bestseller</Badge>
              <ProductThumb>
                <LazyLoadImage src={ProductImage} height={436} effect="blur" />
              </ProductThumb>
              <ProductDetails>
                <ProductName>{product.name}</ProductName>
                <Subtitle>{product.subtitle}</Subtitle>
                <PriceContainer>
                  <Price>
                    <Rup />
                    <span>{product.specialPrice}</span>
                    {product.specialPrice != product.price ? (
                      <CrossPrice>{product.price}</CrossPrice>
                    ) : (
                      <></>
                    )}
                  </Price>
                  <Button onClick={() => handleAddToCart(product.uuid)}>
                    add to cart
                  </Button>
                </PriceContainer>
              </ProductDetails>
            </ProductCard>
          );
        })}
      </ProductContainer>
    </>
  );
};

我做错了什么吗？需要帮助请

标签： react-hooksnext.jsapollo-client