如何在组件 React / React-native 的单独页面中使用动态 graphql（字符串）

Question

我有一个 react-native 功能组件，它使用 Apollo useQuery hook 来进行一些 graphql 查询。当这个组件被渲染时，它会从上一页接收一个 id prop。所以我需要在graphql查询中动态使用这个id。

我可以像这样在组件内部轻松完成

const query = gql`
  query MyQuery {
    getItems(id: \"${id}\") {
      items {
          name
          price
        }
      }
    }
  `;

  const { loading, error, data } = useQuery(query); 

但我需要将所有 graphql 查询放入单独的文件夹中。我不知道如何将道具发送到另一个页面，然后只接收返回的 graphql 字符串以在 useQuery 挂钩中使用。

因此，与其将 const 查询放到我使用“useQuery”的当前页面，我需要从另一个页面接收它。

我想做这样的事情：

import Query from '../queries/itemQuery'

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

我试过这个和类似的东西：

itemQuery.js

import { gql } from '@apollo/client';
const itemQuery = (id) => { 
    gql`
      query MyQuery {
        getItems(id: ${id}) {
          items {
              name
              price
            }
          }
        }
      `;
export default itemQuery

在我使用“useQuery”的主页中：

import Query from '../queries/itemQuery'
const { loading, error, data } = useQuery(Query(id));

当我尝试将 id 从主页发送到 itemQuery.js 时，它不起作用。我遇到了不同的错误，例如 itemQuery 不是函数等。我还尝试将其作为返回查询的函数，但它不起作用。我修改了这个问题。以前的答案对我没有用，我想我解释错了。这是我在 stackoverflow 上提出的第一个问题，因此您可以帮助我改进，只需询问我应该解释的缺失部分。

Answer 1

您必须在查询中使用variables。所以在查询中将id 作为变量传递，然后您可以在查询中的任何位置传递id 变量值。

所以，首先在itemQuery.js 中声明您的查询如下：

export const GET_ITEMS = gql`
  query getItems($id: String) {
    getItems(id: $id) {
      items {
          name
          price
        }
      }
    }
`;

现在，在您的组件中导入查询作为传递变量，如下所示：

import { GET_ITEMS } from '../queries/itemQueries';

const { loading, error, data } = useQuery(Query, {
  variables: {id: 'your_id`}
});

请注意，我使用 $id: String 假设您的 id 将是字符串。但是您可以根据需要使用任何类型。