React组件中如何为GraphQL的useQuery传递id参数？

你目前的代码存在两处关键错误，以下是修正方案：

1. 修正组件接收props的方式 #

组件的参数是props对象，直接写(id)无法正确获取传入的id值，需要通过解构获取：

const Items = ({ id }) => {
  // 后续代码
}

2. 正确使用useQuery传递变量 #

ITEMS_QUERY是gql解析后的查询文档，不是可调用函数，不能直接传入id作为参数。正确做法是给useQuery传入第二个配置参数，通过variables字段传递变量：

const { data, loading, error } = useQuery(ITEMS_QUERY, {
  variables: { id } // 这里的id就是组件接收的props值
});

完整修正后的代码 #

const ITEMS_QUERY = gql`query GetEntry($id: ID!) {
  getEntry(id: $id) {
    id
    date
    items {
      items {
        id
        entryID
        name
        amount
        hazardRating
        createdAt
        updatedAt
      }
      nextToken
    }
    createdAt
    updatedAt
  }
}`;

const Items = ({ id }) => {
    const { data, loading, error } = useQuery(ITEMS_QUERY, {
      variables: { id }
    });

    console.log(id)

    if (loading) return "Loading...";
    if (error) return <pre>{error.message}</pre>
  
    return (
        <div className="Items">
          {/* 可根据data渲染具体内容，示例如下 */}
          {data?.getEntry && (
            <>
              <h3>条目ID: {data.getEntry.id}</h3>
              <p>日期: {data.getEntry.date}</p>
            </>
          )}
        </div>
      );
}

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