How to give specific id and using apollo client

Question

It is work for backend.

Backend

type Query {
    allUsers: [User!]!
    allPosts: [Post!]!
    singleDetail(id:Int): Post!
}

resolver

singleDetail: async(_parent:any, args: { id: number }) => {
    return await prisma.post.findUnique({
        where:{
          id: args.id
        }
    })
}

But Frontend is not work.This is Posts List. I want when clicking the detail button, it's displayed single detail post.

const detailPostButton = (id:number) => SinglePostShow({id})

    return (
      <Col span={6} key={id}>
        <div style={{ backgroundColor: 'beige' }}>
          <p>title:{title}</p>
          <p>content:{content}</p>
          <div className="buttonPlace">
            <Button onClick={() => deletePostButton(id)}>削除</Button>
            <div>
              <NavLink to={`/AllPostsShow/${id}`}>
                <Button onClick={() => detailPostButton(id)}>
                  詳細
                </Button>
              </NavLink>
            </div>
          </div>
        </div>
      </Col>
    )

this is a single post file.

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

const SINGLE_POST_DETAIL = gql`
  query singleDetail($id: Int) {
      singleDetail(id: $id) {
          id
          title
          content
      }
  }
`

export const SinglePostShow = ({id}:{id:number}) => {
  console.log(id,'id')

  const {
    data,
    loading,
    error
  } = useQuery(SINGLE_POST_DETAIL,{
    variables:{
      id
    },
  })

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error...</p>

  const {id:singleId,title,content} = data
  

  return (
    <div key={singleId}>
      detailForm
      <input>{title}</input>
      <input>{content}</input>
    </div>
  )
}

export default SinglePostShow

I can get id from const detailPostButton = (id:number) => SinglePostShow({id}). But how to handle apollo....

and when clicking detail button, it's error like the following a pic.

enter image description here