Apollo Client 未读取使用 useQuery 挂钩传入的变量

Question

将变量传递到 useQuery 挂钩时出现奇怪的问题。

查询：

const GET_USER_BY_ID= gql`
  query($id: ID!) {
    getUser(id: $id) {
      id
      fullName
      role
    }
  }
`;

调用查询：

const DisplayUser: React.FC<{ id: string }> = ({ id }) => {
  const { data, error } = useQuery(GET_USER_BY_ID, {
    variables: { id },
  });

  return <div>{JSON.stringify({ data, error })}</div>;
};

渲染组件：

<DisplayUser id="5e404fa72b819d1410a3164c" />

这会产生错误：

"Argument \"id\" of required type \"ID!\" was provided the variable \"$id\" which was not provided a runtime value."

从 GraphQL Playground 调用查询 returns 预期结果：

{
  "data": {
    "getUser": {
      "id": "5e404fa72b819d1410a3164c",
      "fullName": "Test 1",
      "role": "USER"
    }
  }
}

并在没有变量的情况下调用查询，而是对 id 进行硬编码：

const GET_USER_BY_ID = gql`
  query {
    getUser(id: "5e404fa72b819d1410a3164c") {
      id
      fullName
      role
    }
  }
`;

const DisplayUser: React.FC = () => {
  const { data, error } = useQuery(GET_USER_BY_ID);

  return <div>{JSON.stringify({ data, error })}</div>;
};

也是returns预期的结果。

我还尝试测试一个类似的查询，该查询将 firstName: String! 作为参数，它也会产生一个错误，指出该变量未提供运行时值。当硬编码查询字符串中的值时，此查询也按预期工作。

这个项目今天开始，使用 "apollo-boost": "^0.4.7"、"graphql": "^14.6.0" 和 "react-apollo": "^3.1.3"。

Answer 1

我也运行遇到了类似的问题，但不确定发生了什么。这里似乎报告了类似的问题 - https://github.com/apollographql/graphql-tools/issues/824

我们有 2 个选项来解决这个问题。 - 第一个是一个简单的修复，当它只需要一个参数（不是对象）

时，你不会强制使用 ID

const GET_USER_BY_ID= gql`
  query($id: ID) {

第二个选项是使用对象而不是基元作为参数。我继续这样做，它似乎对我来说工作得很好，即使我制作了对象和里面的属性是必需的。 // 在客户端

const GET_USER_BY_ID= gql`
   query($input: GetUserInput!) {
     getUser(input: $input) {
        id
        fullName
        role
     }
}`;  
        
const { data, error } = useQuery(GET_USER_BY_ID, {
  variables: { input: { id }},
});

// 在服务器中，定义输入类型

  input GetUserInput {
      id: ID!
    }

Answer 2

[已解决]

在阅读堆栈跟踪时，我注意到问题是引用了我用于 validationRules 的 graphql-query-complexity。我删除了验证规则，现在一切正常！当然，我目前没有验证，但至少我可以在这里工作。感谢所有花时间回复的人！

Answer 3

尝试

const { data, error } = useQuery(GET_USER_BY_ID, { id });

Apollo Client 未读取使用 useQuery 挂钩传入的变量

Apollo Client is not reading variables passed in using useQuery hook

reactjs

graphql

apollo-client