Apollo Client useMutation data always returns undefined

Question

I have the following code that runs a mutation to update a post to "published" the mutation works great! It updates the data as expected. However, the data property is always undefined in the useMutation hook. This is odd because I can see the response has data in it in the network tab. I'm quite stumped on this issue. Help would be appreciated. Here is the react code:

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>
  );
}

And here is the graphql code that runs on the server (I doubt this section is the problem but you never know)

  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;
  }

also, I've noticed if I await publishPost I do eventually get data however I think there's a problem in the setup as I should just be able to use useMutation as above.

Here is a picture of the network response:

Answer 1

From what I can see, there's no reason data should always be undefined, especially since a post can go from unpublished to published using the mutation and you see a response in the network tab.

If you have the following console.log:

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

What you will see in the console at the various stages of the mutation is:

1. Before mutation is fired

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

2. Right after mutation is fired - loading changes from false to true

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

3. After the mutation is successful - receive response data and loading changes from true to false

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

This will also be reflected on the UI.

Just a couple of questions:

1. After you publish a post successfully, do you see the option to un-publish it after?
2. What is the response you see in the network tab after you fire off the mutation?

Answer 2

While I was not able to figure out why data was undefined I was able to call the update function and receive the data I needed. Still unsure why data is undefined when used without this.

  const [publishPost, { loading }] = useMutation(PUBLISH_POST, {
    update(_, result) {
      console.log(result);
      navigate("/");
    });

https://www.apollographql.com/docs/react/data/mutations/

Maybe it has something to do with caching: "When a mutation's response is insufficient to update all modified fields in your cache (such as certain list fields), you can define an update function to apply manual changes to your cached data after a mutation."