Apollo客户端未读取使用useQuery挂钩传递的变量

时间:2020-02-12 22:30:19

标签: reactjs graphql apollo-client

在将变量传递到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调用查询将返回预期结果:

{
  "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>;
};

也返回预期结果。

我还试图测试一个类似的查询,该查询以firstName: String!作为参数,这也会产生一个错误,说明未为变量提供运行时值。在查询字符串中对值进行硬编码时,此查询也可以按预期工作。

该项目今天开始,使用"apollo-boost": "^0.4.7""graphql": "^14.6.0""react-apollo": "^3.1.3"

3 个答案:

答案 0 :(得分:1)

[已解决]

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

答案 1 :(得分:0)

我也遇到了类似的问题,不确定是怎么回事。 这里似乎报告了类似的问题-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!
    }

答案 2 :(得分:0)

试试

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