如何在 GraphQL 中使用查询 variables

GraphQL 是一种用于 API 的查询语言，它提供了一种更加高效、强大和灵活的方式来获取数据。GraphQL 的查询语句具有可读性强、易于理解、可扩展和类型安全等特点。在 GraphQL 中，我们可以使用查询 variables 来传递参数给查询语句，以便更好地控制查询的结果。

什么是查询 variables

查询 variables 是一种用于传递参数给 GraphQL 查询语句的方法。通过使用查询 variables，我们可以在查询语句中定义变量，然后在查询时将这些变量的值传递给查询语句。这样做可以使查询语句更加灵活，可以根据不同的情况返回不同的结果。

如何使用查询 variables

在 GraphQL 中，我们可以使用 $ 符号来定义一个变量。例如：

query GetUser($id: ID!) {
  user(id: $id) {
    name
    age
  }
}

在上面的示例中，我们定义了一个名为 id 的变量，它的类型是 ID!，也就是必须传递一个 ID 类型的值。在查询时，我们可以将这个变量的值传递给查询语句，例如：

{
  "id": "123"
}

这样，GraphQL 就会使用传递进来的 id 值来执行查询语句，并返回相应的结果。

示例代码

下面是一个使用查询 variables 的示例代码：

// javascriptcn.com 代码示例
import { gql, graphql } from 'react-apollo';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      age
    }
  }
`;

const User = ({ data }) => {
  const { loading, error, user } = data;

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};

export default graphql(GET_USER, {
  options: ({ id }) => ({ variables: { id } }),
})(User);

在上面的示例代码中，我们使用了 react-apollo 库来发起 GraphQL 查询。在 graphql 高阶组件中，我们可以使用 options 参数来传递查询 variables。在这个示例中，我们将 id 作为参数传递给 options，然后将其作为查询 variables 传递给 GraphQL 查询语句。

总结

通过使用查询 variables，我们可以更加灵活、高效地控制 GraphQL 查询语句的结果。在实际开发中，我们可以根据不同的情况传递不同的变量值，以便获得更加精确的查询结果。同时，查询 variables 也使得我们可以更加清晰地定义查询语句的参数，提高了代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6573d167d2f5e1655dcf9e88