如何通过Apollo Client传入特定ID并解决文章详情页加载异常问题

我来帮你梳理下当前代码里的问题，主要有几个关键错误导致了异常，咱们一步步修正：

1. 查询结果的解构逻辑错误 #

你的GraphQL查询返回的data对象是嵌套结构的——因为你查询的字段是singleDetail，所以实际data的格式是 { singleDetail: { id, title, content } }，但你直接从data里解构id、title，这会导致这些变量未定义，直接引发错误。

2. 多余的按钮点击处理 #

你在NavLink包裹的按钮上添加了onClick={() => detailPostButton(id)}，但这个detailPostButton函数只是手动调用了SinglePostShow({id})，这完全是多余的操作：NavLink已经会跳转到对应路由，路由匹配后SinglePostShow组件会自动渲染并执行查询，这个额外的函数调用不仅没用，还可能引发不必要的渲染异常。

3. Input标签的写法错误 #

你写的<input>{title}</input>是不符合HTML规范的，input标签需要通过value属性来展示内容，直接把文本放在标签内部会报错。

修改后的完整代码 #

文章列表组件（移除多余的点击逻辑）

// 直接删掉这个没用的函数
// 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跳转，去掉多余的onClick */}
          <NavLink to={`/AllPostsShow/${id}`}>
            <Button>詳細</Button>
          </NavLink>
        </div>
      </div>
    </div>
  </Col>
)

文章详情组件SinglePostShow（修复解构与Input）

import { useQuery, gql } from '@apollo/client'
// 建议把$id改成非空Int，和后端定义匹配（后端返回非空Post，id必填）
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) {
    // 加上错误日志方便排查
    console.error('文章详情查询出错:', error)
    return <p>加载文章详情失败...</p>
  }
  // 从data.singleDetail里解构数据，这是正确的结构
  const {id:singleId,title,content} = data.singleDetail
  return (
    <div key={singleId}>
      <h3>detailForm</h3>
      {/* 使用value属性展示内容，添加readOnly防止误编辑（需要编辑的话可以去掉） */}
      <input value={title} readOnly />
      <input value={content} readOnly />
    </div>
  )
}
export default SinglePostShow

额外优化建议 #

• 后端的Query定义里，singleDetail(id:Int)建议改成singleDetail(id:Int!)，因为你返回的是Post!（非空文章），不传id的话查询必然失败，强制id为必填能避免潜在的空值问题，前端的GraphQL查询也对应改成$id: Int!即可。
• 保留错误日志的输出，方便后续排查类似问题。

内容的提问来源于stack exchange，提问作者businessryuya