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

Question

我有一个 react-native 功能组件，它使用 Apollo useQuery 挂钩来进行一些 graphql 查询。呈现此组件时，它会从上一页接收到一个 id 道具。所以我需要在 graphql 查询中动态使用这个 id。

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

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

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

但我需要将所有 graphql 查询放入单独的文件夹中。我不知道如何将 prop 发送到另一个页面，然后只接收回 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 is not a function 等。我还尝试将其作为 returns 查询的函数，但它没有用。我修改了这个问题。以前的答案对我没有用，我想我解释错了。这是我在 Whosebug 上问的第一个问题，所以你可以帮助我改进，只问我应该解释的遗漏部分。

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 将是字符串。但是您可以根据需要使用任何类型。

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

How to use dynamic graphql (string) from separate page in component React / React-native

apollo

reactjs

graphql

react-native