Apollo Cache 是完全空的，我的查询和突变也是如此

如何解决Apollo Cache 是完全空的，我的查询和突变也是如此

我正在使用 Apollo 开发工具，我的查询是空的，在呈现查询的页面上，当我运行突变时，我的突变是空的。我可以很好地使用 graphql 选项卡。并且缓存是完全空的。我不明白。

我想知道缓存是否永远不会被保存，或者开发工具是否有问题。我以前的开发工具有问题，但这似乎很奇怪，默认情况下 apollo 不会将内容保存到缓存中

这是我的阿波罗客户

const createApolloClient = (accesstoken) => {
  const link = createHttpLink({
    uri: "https://graphql.us.fauna.com/graphql",credentials: "same-origin",headers: {
      authorization: `Bearer ${accesstoken}`,},});

  return new ApolloClient({
    cache: new InMemoryCache({}),link,});
};

这是个人资料页面

const fetcher = (url) => fetch(url).then((r) => r.json());

function useAuth() {
  const { data: user,error,mutate } = useSWR("/api/user",fetcher);

  const loading = user?.token === false || user === undefined;

  return {
    user,loading,};
}

export default function Profile() {
  const { user,loading } = useAuth();

  return (
    <Layout>
      <main>
        {loading ? (
          <ImageRotate>
            <img src="/logo-3.png" />
          </ImageRotate>
        ) : (
          <>
            <Data user={user} />
            <CreateDadHat user={user} />
          </>
        )}
      </main>
    </Layout>
  );
}

const CreateDadHat = ({ user }) => {
  const [cloudLinks,setCloudLinks] = useState([]);

  const clickMe = () => {
    const isbrowser = typeof window !== "undefined";

    if (!isbrowser) {
      return;
    }
    console.log(window.cloudinary); //
    let widget = window.cloudinary.createUploadWidget(
      {
        cloudName: `kitson-co`,sources: ["local","url"],uploadPreset: `dadHats`,maxFiles: 1,(error,result) => {
        if (!error && result && result.event === "success") {
          // console.log(result.info.url)
          // setCloudLinks([...cloudLinks,result.info.url])
          setCloudLinks((state) => [...state,result.info.url]);
        }
      }
    );
    widget.open(); //
  };

  const removeImage = (e) => {
    const arrayIndex = e.target.getAttribute("name");
    // console.log(cloudLinks)
    // console.log(cloudLinks[arrayIndex])
    setCloudLinks(cloudLinks.filter((item) => item !== cloudLinks[arrayIndex]));
  };

  const [createDadHat,{ data: createDadHatData,loading: saving }] =
    useMutation(CREATE_DAD_HAT);

  const {
    register,handleSubmit,formState: { errors },} = useForm();
  const onSubmit = async (data) => {
    console.log(data);
    console.log("user >>>>",user);
    const createDadHatResponse = await createDadHat({
      variables: {
        connect: user.id,name: data.name,image: cloudLinks[0],}).catch(console.error);
  };
  console.log(errors);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="text" placeholder="name" {...register("name",{})} />

        <input type="submit" />
      </form>
      {cloudLinks &&
        cloudLinks.map((img,i) => {
          return (
            <div className="imgPreview" key={i}>
              <button className="close" name={i} onClick={removeImage}>
                X
              </button>
              <img src={img} />
            </div>
          );
        })}

      <button
        type="button"
        onClick={clickMe}
        id="upload_widget"
        className="upload"
      >
        Upload files
      </button>
    </>
  );
};

const Data = ({ user }) => {
  const { loading,data } = useQuery(GET_DAD_HATS_BY_USER_ID,{
    variables: { id: user.id },});

  if (loading) return <h1>Loading Data...</h1>;

  if (error) return <h1>{error.message}</h1>;

  return (
    <>
      {data && <DadHats user={user} data={data} />}
      <pre>{JSON.stringify(data?.findUserByID?.hats,null,2)}</pre>
    </>
  );
};

解决方法

Geez 不得不做以下事情

connectToDevTools: true,

const createApolloClient = (accessToken) => {
  const link = createHttpLink({
    uri: "https://graphql.us.fauna.com/graphql",credentials: "same-origin",headers: {
      authorization: `Bearer ${accessToken}`,},});

  return new ApolloClient({
    cache: new InMemoryCache({}),link,connectToDevTools: true,});
};