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

Posted 2023-03-10

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

【英文标题】：How to use dynamic graphql (string) from separate page in component React / React-native

【发布时间】：2021-06-22 19:15:18

【问题描述】：

我有一个 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 不是函数等。我还尝试将其作为返回查询的函数，但它不起作用。我修改了这个问题。以前的答案对我没有用，我想我解释错了。这是我在 *** 上提出的第一个问题，因此您可以帮助我改进，只需询问我应该解释的缺失部分。

【问题讨论】：

graphql.org/learn/queries/#variablesapollographql.com/docs/react/api/react/hooks/#example-2

你的想法是滥用graphql，答案是正确的...搜索导入graphql文件教程/文章

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

【讨论】：

感谢您的回复。但是我已经可以在主页中这样使用它了。我想我解释错了我的问题。我需要从 useQuery 中的另一个页面导入此查询，并将 id 发送到其中的该查询。因此，如果我像您显示的那样发送变量，我将如何在我有查询字符串的 itemQuery.js 文件中接收它。还有怎么导出？谢谢

@Canol 这是正确的方法，没有发送，没有字符串文字操作...查询可以/应该是仅 graphql 文件（使用一些 [webpack] graphql 加载器） , w/o js, 需要导出...就这样使用吧！

@Canol 我更新了答案。您可以在任何 .js 文件中创建查询并将其导入。您无需担心如何在查询中获取变量。它将自动传递给查询。

另外你应该将itemQueries.js重命名为index.js，然后在该文件中声明所有查询，如`export const GET_ITEMS = gql; export const GET_COLLECTIONS = gql;等