graphQl、apolloを使用して単一のデータを取得したい

import { useQuery, gql, useMutation } from '@apollo/client'
import { Button, Col, Row } from 'antd'
import { NavLink } from 'react-router-dom'
import SinglePostShow from './SinglePostShow'

export const POST_DATA = gql`
  query allPosts {
    allPosts {
      id
      title
      content
    }
  }
`

const DELETE_POST = gql`
  mutation deletePost($id: Int) {
    deletePost(id: $id) {
      id
    }
  }
`

export const AllPostsShow = () => {
  const {
    data: post_data,
    loading: post_loading,
    error: post_error,
  } = useQuery(POST_DATA)

  const [deletePost] = useMutation(DELETE_POST, {
    refetchQueries: ['allPosts'],
  })

  const deletePostButton = (id: number) => {
    deletePost({
      variables: {
        id,
      },
    })
    alert('削除しました')
  }

  const detailPostButton = () => SinglePostShow()

  if (post_loading) return <p>Loading...</p>
  if (post_error) return <p>Error...</p>
  return (
    <div className="postData">
      <Row gutter={[16, 16]}>
        {post_data.allPosts.length > 0 &&
          post_data.allPosts.map(
            ({
              id,
              title,
              content,
            }: {
              id: number
              title: string
              content: string
            }) => {
              return (
                <Col span={6} key={id}>
                  <div  style={{ backgroundColor: 'beige' }}>
                    <p>タイトル:{title}</p>
                    <p>内容:{content}</p>
                    <div className="buttonPlace">
                      <Button onClick={() => deletePostButton(id)}>削除</Button>
                      <div>
                        <NavLink to={`/AllPostsShow/${id}`}>
                          <Button
                            onClick={()=>detailPostButton()}
                          >
                            詳細
                          </Button>
                        </NavLink>
                      </div>
                    </div>
                  </div>
                </Col>
              )
            },
          )}
      </Row>
    </div>
  )
}

import { useQuery, gql } from '@apollo/client'

export const SINGLE_POST_DETAIL = gql`
query singleDetail($id: Int) {
  singleDetail(id: $id) {
    id
    title
    content
  }
}
`
export const SinglePostShow = () => {
  const {
    data: single_post_detail,
    loading: post_loading,
    error: post_error,
  } = useQuery(SINGLE_POST_DETAIL)

  if (post_loading) return <p>Loading...</p>
  if (post_error) return <p>Error...</p>
  return(
  <div key={single_post_detail.id}>
    詳細フォーム
    <input value={single_post_detail.title}>{single_post_detail.title}</input>
    <input value={single_post_detail.content}>{single_post_detail.content}</input>
  </div>
  )
}

export default SinglePostShow

import express from "express";
import cors from "cors";
import { PrismaClient } from "@prisma/client";
import { graphqlHTTP } from "express-graphql";
import { makeExecutableSchema } from "@graphql-tools/schema";

export interface Context {
  prisma: PrismaClient;
}

const prisma = new PrismaClient();

const typeDefs = `
  type User {
    id:Int!
    name: String
    email: String!
  }
  type Post {
    id: Int
    title: String!
    content:String!
  }
  type Query {
    allUsers: [User!]!
    allPosts: [Post!]!
    singleDetail(id: Int): [Post!]!
  }
  type Mutation {
    createPost(
      title: String!
      content:String!
      ):Post!
    deletePost(
      id: Int
      ):Post!
    createUser(
      name: String
      email:String!
      ):User!
  }
`;

type argsPostType = {
  title: string;
  content: string;
};
type argsDeletePostType = {
  id: number;
};
// type argsDetailPostType = {
//   id: number;
//   title: string;
//   content: string;
// };
type argsUserType = {
  name: string;
  email: string;
};

const resolvers = {
  Query: {
    allUsers: () => {
      return prisma.user.findMany();
    },
    allPosts: () => {
      return prisma.post.findMany();
    },
    singleDetail: (args:any) => {
      return prisma.post.findUnique({
        where:{
          id:args.post.id
        },
        select:{
          id:true,
          title:true,
          content:true,
        }
      })
    },
  },
  Mutation: {
    createPost: (parent: any, args: argsPostType, context: any, info: any) => {
      const newPost = prisma.post.create({
        data: {
          title: args.title,
          content: args.content,
          author: {
            connect: {
              id: 1,
            },
          },
          published: true,
        },
      });
      return newPost;
    },
    deletePost: (
      parent: any,
      args: argsDeletePostType,
      context: any,
      info: any
    ) => {
      const deletedPost = prisma.user.update({
        where: {
          id: 1,
        },
        data: {
          posts: {
            delete: {
              id: args.id,
            },
          },
        },
      });
      return deletedPost;
    },
    createUser: (parent: any, args: argsUserType, context: any, info: any) => {
      const newUser = prisma.user.create({
        data: {
          name: args.name,
          email: args.email,
        },
      });
      return newUser;
    },
  },
};

export const schema = makeExecutableSchema({
  resolvers,
  typeDefs,
});

const app = express();
app.use(cors());
app.use(
  "/graphql",
  graphqlHTTP({
    schema,
    graphiql: true,
  })
);

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`接続完了！ ${PORT}.`);
});