GraphQLで単一のデータを取得したい
node.js,graphQl,prismaを使用しています。
frontはreactを使用していて、単一のデータを取得しようとしています。
９にすると取得はできるのですが、args?.idでは取得できません。
args?.post?.idでもだめでした。どのようにすれば取得できるのでしょうか？
singleDetail: (args:any) => {
return prisma.post.findUnique({
where:{
id:args?.id || 9
},
select:{
id:true,
title:true,
content:true,
}
})
},
Frontを載せときます.
Listのpageです。ここから単一のページにいきます。
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 detailPostButton = ({id}:{id:number}) => SinglePostShow({id})
const [deletePost] = useMutation(DELETE_POST, {
refetchQueries: ['allPosts'],
})
const deletePostButton = (id: number) => {
deletePost({
variables: {
id,
},
})
alert('削除しました')
}
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({id})}>
詳細
</Button>
</NavLink>
</div>
</div>
</div>
</Col>
)
},
)}
</Row>
</div>
)
}
単一のページです。
import { useQuery, gql } from '@apollo/client'
// import { useParams } from 'react-router-dom'
export 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: single_post_detail,
loading: post_loading,
error: post_error,
} = useQuery(SINGLE_POST_DETAIL)
console.log(single_post_detail,'data')
if (post_loading) return <p>Loading...</p>
if (post_error) return <p>Error...</p>
return (
<div key={id}>
詳細フォーム
<input>{single_post_detail.title}</input>
<input>{single_post_detail.content}</input>
</div>
)
}
export default SinglePostShow
0
