将 ID 从 React 传递给 Apollo 以找到正确的结果？

Question

我将 React 与 Apollo（Apollo Client v2）一起使用。我有需要返回单个组的组查询。

此代码有效，但我已硬编码 HARD-CODED-ID。我怎样才能将 ID 作为字符串从 React 组件传递？

在我的 React 组件中：

const groupQuery = gql`
    query Group {
        group {
            _id
            name
        }
    }
`;

export default graphql(groupQuery, {
    props: ({ data }) => ({ ...data }),
})(GroupPage);

我的解析器：

Query: {
    groups() {
        return Groups.find().fetch();
    },
    group() {
        return Groups.findOne('HARD-CODED-ID');
    },
}

Answer 1

您需要做三件事：

1.) 如果您还没有修改，请修改服务器上的架构，以便您的查询接受 id 作为输入，例如：

type Query {
  #other queries
  group(id: ID!): Group
}

2.) 修改您的解析器，以便它处理传入的 id。假设您使用的是graphql-tools：

group(root, { id }) {
  return Groups.findOne(id); // did you mean something like findOne({id}) ?
},

3.) 修改您的客户端代码。通常，您会将 id 作为传递给组件的道具，然后将其用作请求中的变量。

const groupQuery = gql`
    query Group($id: ID!) {
        group(id: $id) {
            _id
            name
        }
    }
`;

// assuming that the component prop is called groupId
export default graphql(groupQuery, {
    options: ({ groupId }) => ({
      variables: { id: groupId },
    }),
})(GroupPage);

options 可以是一个函数，而不是一个对象，在这种情况下，它会将组件的 props 作为其第一个参数传递。然后，您可以使用这些道具来定义您的查询将使用的变量。您可以阅读更多关于在 Apollo 客户端 here 和 here 中使用变量的信息。