在 React 中，我们经常需要从后端获取数据并展示在页面上。而获取数据的方式往往是通过发送 GraphQL 查询。在发送 GraphQL 查询时，我们可以使用 Query Variables 来传递参数，从而获取更加精确的数据。本文将介绍如何在 React 中有效使用 Query Variables。
什么是 Query Variables
Query Variables 是 GraphQL 中用于向查询传递参数的一种方式。它可以帮助我们更加精确地获取我们需要的数据。在 GraphQL 查询中，我们可以使用 $ 符号来引用 Query Variables，比如：
query getUser($id: ID!) { user(id: $id) { name age } }
在上面的查询中，$id 就是一个 Query Variable，它的类型是 ID!，也就是必填的 ID 类型。当我们发送这个查询时，就需要传递一个 id 参数给它，比如：
{ "id": "123" }
在 React 中使用 Query Variables
在 React 中，我们通常会使用 Apollo Client 来发送 GraphQL 查询。在使用 Apollo Client 时，我们可以通过 useQuery 钩子来发送查询。而在发送查询时，我们可以通过 variables 属性来传递 Query Variables，比如：
-- -------------------- ---- ------- ------ - --------- --- - ---- ----------------- ----- -------- - ---- ----- ------------ ---- - -------- ---- - ---- --- - - -- -------- ------ ------ -- - ----- - -------- ------ ---- - - ------------------ - ---------- - --- ------ -- --- -- --------- ------ ------------------ -- ------- ------ -------- ------- ------ - ----- -------- -------------------- ------- ------------------- ------ -- -展开代码
在上面的代码中，我们定义了一个 GET_USER 查询，并通过 useQuery 钩子来发送它。在发送查询时，我们通过 variables 属性传递了一个 id 参数，它的值是 userId。当查询完成后，我们就可以从 data 中获取到查询结果，并展示在页面上。
Query Variables 的指导意义
使用 Query Variables 可以帮助我们更加精确地获取我们需要的数据。它可以让我们在查询时只获取我们需要的数据，避免了无用的数据传输，从而提高了查询效率。同时，它也可以帮助我们减少查询的复杂度，让查询更加易于维护。
示例代码
以下是一个完整的示例代码，它展示了如何在 React 中使用 Query Variables：
-- -------------------- ---- ------- ------ - --------- --- - ---- ----------------- ----- -------- - ---- ----- ------------ ---- - -------- ---- - ---- --- - - -- -------- ------ ------ -- - ----- - -------- ------ ---- - - ------------------ - ---------- - --- ------ -- --- -- --------- ------ ------------------ -- ------- ------ -------- ------- ------ - ----- -------- -------------------- ------- ------------------- ------ -- - -------- ----- - ------ ----- ------------ --- -展开代码
在上面的代码中，我们定义了一个 User 组件，它通过 useQuery 钩子发送了一个 GET_USER 查询，并通过 variables 属性传递了一个 id 参数。当查询完成后，我们从 data 中获取到了查询结果，并展示在页面上。最后，我们在 App 组件中使用了 User 组件，并传递了一个 userId 参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cab0a7e46428fe9e31effc
