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

分享于2022年09月08日 apollo-client graphql javascript prisma reactjs 问答
【问题标题】:Apollo Client useMutation data always returns undefinedApollo 客户端 useMutation 数据总是返回 undefined
【发布时间】:2022-08-02 09:43:53
【问题描述】:

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

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 ;
  }
  if (data?.userErrors?.length) {
    return (
      
{data.userErrors.map(e => { return

{e?.message}

; })}
); } if (unpublishData?.userErrors?.length) { return (
{unpublishData.userErrors.map(e => { return

{e?.message}

; })}
); } return (
ID: {id}
{isMyProfile && published === false && (

{ publishPost({ variables: { id } }); }} > publish

)} {isMyProfile && published === true && (

{ UnpublishPost({ variables: { id } }); }} > unpublish

)}

{title}

Created At {formatedDate} by {user}

{content}

); }

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

  postPublish: async (
    _: any,
    { id }: { id: string },
    { prisma, userInfo }: Context
  ): Promise => {
    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。

这是网络响应的图片:

    <1234563>
    你能发一个 minimal reproducible example 吗?您的应用程序中的任何内容是否会导致 <Post> 在(取消)发布时重新安装?
    <1234563>
    代码就在那里。什么会导致这种情况?
    <1234563>
    解析响应时可能是错误,检查它是否返回错误 { data: unpublishData, loading: unpublishLoading, error: unpublishError }
    <1234563>
    您是否以某种方式将 ignoreResults 设置为 true ?见 doc

【解决方案1】:

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

    useEffect (() => {

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

    }, [unpublishData])

学习如何做的 *** 教程: https://www.***.com/watch?v=YyUWW04HwKY

Github repo 有一个例子: https://github.com/machadop1407/GraphQL-ApolloClient-Template/tree/main/client

【讨论】: