如何将返回的数据处理为需要添加到 apollo 和 reactjs 中的 useQuery 钩子的未定义

如何解决如何将返回的数据处理为需要添加到 apollo 和 reactjs 中的 useQuery 钩子的未定义

我有以下代码，但它在第一次渲染和查询时呈现未定义的 cookieData，因此查询没有获取 cookie 并且验证失败。任何使查询在运行之前等待对 cookie api 的调用返回的方法。

const { data: cookieData,error: cookieError } = useSWR(
    "/api/cookie",fetcher
  );

  console.log(cookieData);


  var test = `Bearer ${cookieData}`;

  const { loading,error,data } = useQuery(FORMS,{
    context: {
      headers: {
        authorization: test,},});

更新：我最终使用了上面的延迟查询，但我也会尝试跳过，但我现在一直在尝试对这个突变实现跳过，它说 id 未定义，它在页面上控制台但是是前几次未定义。

const addFormClicked = async (data) => {
    //console.log(data);
    const res = await createForm({
      variables: {
        name: data.name,user: user.id,skip: !user.id,});
    console.log(res);
    Router.push(`/formBuild/${res.data.createForm._id}`);
  };

这是上下文的完整代码

import { useMutation,gql } from "@apollo/client";
import Layout from "../components/Layout";
import { useForm } from "react-hook-form";
import { useRouter } from "next/router";
import { FORMS } from "../components/Layout";
import useSWR from "swr";
import { useState } from "react";

const ADD_FORM = gql`
  mutation AddForm($name: String!,$id: ID!) {
    createForm(data: { name: $name,user: { connect: $id } }) {
      name
      _id
    }
  }
`;

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

export default function AddForm() {
  const { data: user } = useSWR("/api/user"); // add

  const { data: cookieData,fetcher
  );

  var test = `Bearer ${cookieData}`;

  const Router = useRouter();

  const [
    createForm,{
      data: createFormData,error: createFormError,loading: createFormloading,] = useMutation(ADD_FORM,{
    refetchQueries: [{ query: FORMS }],context: {
      headers: {
        authorization: test,});

  const addFormClicked = async (data) => {
    //console.log(data);
    const res = await createForm({
      variables: {
        name: data.name,});
    console.log(res);
    Router.push(`/formBuild/${res.data.createForm._id}`);
  };

  const { register,handleSubmit,errors,reset } = useForm();

  if (createFormloading) return <p>Loading</p>;
  if (createFormError) return <p>Error: {createFormError.message}</p>;

  //console.log(createFormData);

  return (
    <Layout>
      <form onSubmit={handleSubmit(addFormClicked)}>
        <h1>Form Name</h1>
        <input type="text" name="name" ref={register()} />
        <button type="submit">Add Form</button>
      </form>
    </Layout>
  );
}

更新：用户需要是id，见下文

 const addFormClicked = async (data) => {
    //console.log(data);
    const res = await createForm({
      variables: {
        name: data.name,id: user.id,//NOT user:user.id BUT id:user.id
      },});
    console.log(res);
    Router.push(`/formBuild/${res.data.createForm._id}`);
  };

解决方法

当查询处于 user 状态时，undefined 变量将为 loading。与 cookieData 相同。 useMutation 中没有可用的 skip 选项，因为它不会在组件呈现时自动执行更改。

一个简单的解决方案是仅当 user 和 cookieData 存在时才呈现表单。这样，您就可以确定提交表单时用户 ID 和令牌是否可用。

// Add `userError` to use in combination with `user` to check if the query is loading
const { data: user,error: userError } = useSWR('/api/user',userFetcher)

const [
  createForm,{ data: createFormData,error: createFormError,loading: createFormLoading },] = useMutation(ADD_FORM,{
  refetchQueries: [{ query: FORMS }],})

const addFormClicked = async (data) => {
  const res = await createForm({
    context: {
      headers: {
        authorization: `Bearer ${cookieData}`,},variables: {
      name: data.name,user: user.id,})
  Router.push(`/formBuild/${res.data.createForm._id}`)
}

if (userError || cookieError) {
  return <div>Something went wrong</div>
}

if (!user || !cookieData) {
  return <div>Loading...</div>
}

// Render form