阿波罗缓存完全是空的，我的查询和突变也是如此

Posted 2023-03-10

【中文标题】阿波罗缓存完全是空的，我的查询和突变也是如此

【英文标题】：Apollo Cache is completely empty as are my queries and mutations

【发布时间】：2021-09-26 00:27:27

【问题描述】：

我正在使用 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,
    error,
  ;


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, error, 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>
    </>
  );
;

【参考方案1】：

天啊，不得不做以下事情

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