Javascript 如何将返回的数据作为未定义的数据处理，这些数据需要添加到apollo和reactjs中的useQuery挂钩中

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

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, error: cookieError } = useSWR(
    "/api/cookie",
    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,
        user: user.id,
      },
      skip: !user.id,
    });
    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>
  );
}

---

当查询处于加载状态时，

user

变量将是

undefined

。与

cookieData

相同。中没有可用的

skip

选项，因为它不会在组件渲染时自动执行变异

一个简单的解决方案是仅当

user

和

cookieData

存在时才呈现表单。通过这种方式，您可以确定在提交表单时用户id和令牌是否可用

//添加'userError'与'user'结合使用，以检查查询是否正在加载
const{data:user，error:userError}=useSWR（'/api/user'，userFetcher）
常数[
createForm，
{data:createFormData，错误：createFormError，加载：createFormLoading}，
]=使用变异（添加形式{
refetchQueries:[{query:FORMS}]，
})
const addFormClicked=async（数据）=>{
const res=wait createForm({
背景：{
标题：{
授权：`Bearer${cookieData}`，
},
},
变量：{
name:data.name，
用户：user.id，
},
})
Router.push（`/formBuild/${res.data.createForm.\u id}`）
}
if（userError | | cookieError）{
返回出了问题的地方
}
如果（！user | |！cookieData）{
返回加载。。。
}
//渲染形式

skip

optionok如果我通过skip true，那么当cookieData返回时我如何重新运行。。。为什么为true？@AndersKitson如果

cookieData

是

undefined

-

skip:，您只想跳过查询！cookieData

。所以我稍微改变了一下问题，我用lazyquery解决了第一个问题，但我也会尝试跳过，但您能帮助我理解为什么跳过不适用于user.id、user.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
      },
      skip: !user.id,
    });
    console.log(res);
    Router.push(`/formBuild/${res.data.createForm._id}`);
  };