Reactjs/Apollo: TypeError: Object(...)(...).data 未定义

Question

我已经尝试解决此错误 3 天了，但我无法弄清楚。我不断得到

TypeError: Object(...)(...).data 未定义 每当我尝试使用其 ID 转到特定帖子时。从 db 中导入。

import React, { useContext } from "react";
import "./post.css";
import { AuthContext } from "../context/auth";
import DeleteButton from "../components/DeleteButton";
import { FETCH_POST_QUERY } from "../util/graphql";
import { useQuery } from "@apollo/client";


function SinglePost(props) {
    const postId = props.match.params.postId;
    const { user } = useContext(AuthContext);
    console.log(postId);
  
    const {
      data: { getPost }
    } = useQuery(FETCH_POST_QUERY, {
      variables: {
        postId
      }
    });

  function deletePostCallback() {
    props.history.push("/");
  }
  let postMarkup;
  if (!getPost) {
    postMarkup = <p>Loading post..</p>;
  } else {
    const {
      id,
      firstname,
      lastname,
      job,
      phone,
      address,
      education,
      workExperience,
    } = getPost;
    //const postKeys = Object.values(getPost.education);

    postMarkup = (
      <div class="wrapper clearfix">
        <div class="left">
          <div class="name-hero">
            <div class="me-img"></div>

            <div class="name-text">
              <h1>
                {firstname} <em>{lastname}</em>
              </h1>
              <p>{address}</p>
              <p>Email soon</p>
              <p>{phone}</p>
            </div>
          </div>
        </div>
        <div class="right" >
          <div class="inner">
            <section>
              <h1>Employment</h1>
              {workExperience.map((work) => (
                <p key={work.id}>
                  {work.beginDate}--{work.endDate}
                  <em>{work.body}</em>
                </p>
              ))}
            </section>
            <section>
              <h1>Education</h1>
              {education.map((edu) => (
                <p key={edu.id}>
                  {edu.beginDate}--{edu.endDate}
                  <em>{edu.body}</em>
                </p>
              ))}
            </section>
            <section>
              <h1>Technical Skills</h1>
              <ul class="skill-set">
                <li>To be added</li>
              </ul>
            </section>
            <section>
              <h1>References</h1>
              <p>To be Added</p>
            </section>
            <section>
              <h1>Hobbies</h1>
              <ul class="skill-set">
                <li>Faith</li>
                <li>Biblical Studies</li>
                <li>Playing Guitar</li>
                <li>Song Writing</li>
                <li>Health & Nutrition</li>
                <li>Reading</li>
              </ul>
            </section>
            <section>
              <div class="handmade">
                <p>
                  handmade by <em> Anthony Adamski</em>
                </p>
              </div>
            </section>
          </div>
        </div>
      </div>
    );
              }
  return postMarkup;
}
export default SinglePost;

我正在使用 apollo 客户端/服务器进行查询。 这是我用来从数据库中获取对象的查询

import gql from "graphql-tag";



export const FETCH_POST_QUERY = gql`
query ($postId: ID!) {
  getPost(postId: $postId) {
    id
    useriD
    firstname
    lastname
    job
    phone
    address
    phone
    education {
      id
      body
      beginDate
      endDate
    }
    workExperience {
      id
      body
      beginDate
      endDate
    }
  }
}
`;

这是我从我的应用中得到的结果

Error

当我在 graphQl 或 apollo studio 中尝试查询时，可以毫无问题地获取数据。但是当我在我的应用程序中尝试它时，我得到了那个错误。此外，每当我更改有关查询的某些内容时，都会获取数据，但是当我重新加载页面时，它不再会出现同样的错误。

抱歉，我知道这是一个重复的问题，但过去 2 天我一直在努力寻找解决方案。

Answer 1

第一次执行查询时，data 将是未定义的，因此当您尝试从未定义中提取 getPost 时，它会显示错误。

要解决这个问题，请尝试使用来自useQuery 的loading 状态并在执行查询后提取数据。

function SinglePost(props) {
    const postId = props.match.params.postId;
    const { user } = useContext(AuthContext);
    console.log(postId);
  
    const {
      data, loading
    } = useQuery(FETCH_POST_QUERY, {
      variables: {
        postId
      }
    });

  function deletePostCallback() {
    props.history.push("/");
  }
  let postMarkup;
  if (loading) {
    postMarkup = <p>Loading post..</p>;
  } else {
    const {
      id,
      firstname,
      lastname,
      job,
      phone,
      address,
      education,
      workExperience,
    } = data.getPost;
    //const postKeys = Object.values(getPost.education);

    postMarkup = (
      <div class="wrapper clearfix">
        <div class="left">
          <div class="name-hero">
            <div class="me-img"></div>

            <div class="name-text">
              <h1>
                {firstname} <em>{lastname}</em>
              </h1>
              <p>{address}</p>
              <p>Email soon</p>
              <p>{phone}</p>
            </div>
          </div>
        </div>
        <div class="right" >
          <div class="inner">
            <section>
              <h1>Employment</h1>
              {workExperience.map((work) => (
                <p key={work.id}>
                  {work.beginDate}--{work.endDate}
                  <em>{work.body}</em>
                </p>
              ))}
            </section>
            <section>
              <h1>Education</h1>
              {education.map((edu) => (
                <p key={edu.id}>
                  {edu.beginDate}--{edu.endDate}
                  <em>{edu.body}</em>
                </p>
              ))}
            </section>
            <section>
              <h1>Technical Skills</h1>
              <ul class="skill-set">
                <li>To be added</li>
              </ul>
            </section>
            <section>
              <h1>References</h1>
              <p>To be Added</p>
            </section>
            <section>
              <h1>Hobbies</h1>
              <ul class="skill-set">
                <li>Faith</li>
                <li>Biblical Studies</li>
                <li>Playing Guitar</li>
                <li>Song Writing</li>
                <li>Health & Nutrition</li>
                <li>Reading</li>
              </ul>
            </section>
            <section>
              <div class="handmade">
                <p>
                  handmade by <em> Anthony Adamski</em>
                </p>
              </div>
            </section>
          </div>
        </div>
      </div>
    );
              }
  return postMarkup;
}
export default SinglePost;