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

Question

我有以下代码，但它在第一次呈现和查询时呈现未定义的 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, 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>
  );
}

更新：用户需要是 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}`);
  };

Answer 1

当查询处于 loading 状态时，user 变量将为 undefined。与 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

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

How to handle returned data as undefined that needs to be added to a useQuery hook in apollo and reactjs

javascript

apollo

reactjs

graphql

next.js