Apollo 客户端 useMutation 数据始终返回未定义

Question

我有以下代码运行一个突变来更新帖子以“发布”该突变效果很好！它按预期更新数据。然而，在 useMutation 钩子中 data 属性始终是未定义的。这很奇怪，因为我可以在网络选项卡中看到响应中包含数据。我对这个问题很困惑。如有帮助，将不胜感激。这是反应代码：

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

据我所知，没有理由数据应该总是如此undefined，特别是因为帖子可以使用突变从未发布变为已发布，并且您可以在网络选项卡中看到响应。

如果您有以下情况console.log：

console.log({
  data,
  error,
  loading,
});

在突变的各个阶段，您将在控制台中看到的是：

1. 在突变被触发之前

{data: undefined, error: undefined, loading: false}

2. 突变被触发后 - 加载变化从false到true

{data: undefined, error: undefined, loading: true}

3. 突变成功后 - 接收响应数据并加载更改从true到false

{
  data: {
    postPublish: {
      post: {
        title: "My Post Title", // the title of the post you are publishing
      },
      __typename: "Insert type name"
    },
  },
  error: undefined,
  loading: false,
}

这也将反映在用户界面上。

只是几个问题：

1. 成功发布帖子后，您是否看到了取消发布的选项？
2. 启动突变后，您在网络选项卡中看到的响应是什么？