Refresh Next.js 13 server state after GraphQL mutation

• Next.js 13 (beta) docs

"use client";

import { useRouter } from "next/navigation";

import { graphql } from "../gql";
import { graphqlClient } from "../lib/graphql-client";

const IncrementPostLikesByIdDocument = graphql(/* GraphQL */ `
  mutation IncrementPostLikesById($id: ID!) {
    postUpdate(by: { id: $id }, input: { likes: { increment: 1 } }) {
      post {
        id
        likes
      }
    }
  }
`);

export const Likes = ({ postId, likes }: { postId: string; likes: number }) => {
  const router = useRouter();

  const handleClick = async () => {
    await graphqlClient.request(IncrementPostLikesByIdDocument, {
      id: postId,
    });

    // Update data somehow...
    router.refresh();
  };

  return (
    <button onClick={handleClick}>
      {likes} like{likes === 1 ? "" : "s"}
    </button>
  );
};