javascript - Apollo 客户端 useMutation 数据总是返回 undefined

Question

我有以下代码运行突变以将帖子更新为“已发布”突变效果很好!它按预期更新数据。但是， data 属性在 useMutation Hook 中始终未定义。这很奇怪，因为我可以在网络选项卡中看到响应中有数据。我对这个问题感到很困惑。帮助将不胜感激。这是 react 代码:

import { gql, useMutation } from "@apollo/client";
import React from "react";
import { Spinner } from "react-bootstrap";
import "./Post.css";

const PUBLISH_POST = gql`
  mutation PublishPost($id: ID!) {
    postPublish(id: $id) {
      userErrors {
        message
      }
      post {
        title
      }
    }
  }
`;

const UNPUBLISH_POST = gql`
  mutation UnPublishPost($id: ID!) {
    postUnpublish(id: $id) {
      userErrors {
        message
      }
      post {
        title
      }
    }
  }
`;
export default function Post({
  title,
  content,
  date,
  user,
  published,
  id,
  isMyProfile
}) {

  const [publishPost, { data, loading, error }] = useMutation(PUBLISH_POST);
 console.log("data", data);
  const [UnpublishPost, { data: unpublishData, loading: unpublishLoading }] = useMutation(UNPUBLISH_POST);
 
  const formatedDate = new Date(Number(date)).toDateString();

  if (loading || unpublishLoading) {
    return <Spinner animation="border" />;
  }
  if (data?.userErrors?.length) {
    return (
      <div>
        {data.userErrors.map(e => {
          return <p>{e?.message}</p>;
        })}
      </div>
    );
  }
  if (unpublishData?.userErrors?.length) {
    return (
      <div>
        {unpublishData.userErrors.map(e => {
          return <p>{e?.message}</p>;
        })}
      </div>
    );
  }
  return (
    <div
      className="Post"
      style={published === false ? { backgroundColor: "hotpink" } : {}}
    >
      <div>ID: {id}</div>
      {isMyProfile && published === false && (
        <p
          className="Post__publish"
          onClick={() => {
            publishPost({
              variables: {
                id
              }
            });
          }}
        >
          publish
        </p>
      )}
      {isMyProfile && published === true && (
        <p
          className="Post__publish"
          onClick={() => {
            UnpublishPost({
              variables: {
                id
              }
            });
          }}
        >
          unpublish
        </p>
      )}
      <div className="Post__header-container">
        <h2>{title}</h2>
        <h4>
          Created At {formatedDate} by {user}
        </h4>
      </div>
      <p>{content}</p>
    </div>
  );
}

这是在服务器上运行的 graphql 代码(我怀疑这部分是问题，但你永远不知道)

  postPublish: async (
    _: any,
    { id }: { id: string },
    { prisma, userInfo }: Context
  ): Promise<PostPayloadType> => {
    const payLoad = new PayLoad();
    if (!userInfo) {
      payLoad.addError("you must be logged in");
      return payLoad;
    }
    const error = await canUserMutatePost(userInfo.userId, Number(id), prisma);

    if (error.userErrors.length) {
      return error;
    }
    payLoad.post = await prisma.post.update({
      where: {
        id: Number(id)
      },
      data: {
        published: true
      }
    });
    return payLoad;
  }

另外，我注意到如果我等待 publishPost，我最终会得到数据，但是我认为设置中存在问题，因为我应该只能像上面那样使用 useMutation。
这是网络响应的图片:

Answer 1

同意@jeffreyquan 告诉的答案。他解释了数据值(value)如何变化的方式。如果您想在获取数据时触发事件/函数，那么您应该使用 useEffect 如下所示:

    useEffect (() => {

        if (unpublishData){
            // Your code to triggered when we get the data from graphql
        }

    }, [unpublishData])

学习如何做的 YouTube 教程: https://www.youtube.com/watch?v=YyUWW04HwKY
Github repo 有一个例子: https://github.com/machadop1407/GraphQL-ApolloClient-Template/tree/main/client