如何在 react-apollo graphql 查询中正确使用动态变量？

Posted 2023-03-08

技术标签:

【中文标题】如何在 react-apollo graphql 查询中正确使用动态变量？【英文标题】：How Can I correctly use dynamic variables in react-apollo graphql query? 【发布时间】：2018-04-10 13:10:36 【问题描述】：

我有一个 apollo 包装的组件，它应该为我的组件提供来自 github graphql v4 api 的响应数据。我打算使用来自应用程序另一部分的字符串（SEARCH_QUERY）用于我的 gql 查询，但 github 不断返回 undefined。我正在关注阿波罗官方文档http://dev.apollodata.com/react/queries.html#graphql-options。我看不出我做错了什么。

import React,  Component  from 'react';
import  Text, FlatList   from 'react-native';
import  graphql  from 'react-apollo';
import gql from 'graphql-tag';
import  SEARCH_QUERY  from './Home' // this is a string like "react"

// The data prop, which is provided by the wrapper below contains,
// a `loading` key while the query is in flight and posts when ready
const ReposList = ( data:  loading, search ) => <Text>SearchResults</Text>

// this doesnt work because I cant properly inject 'SEARCH_QUERY' string
const searchRepos = gql`
  query searchRepos($type: searchType!, $query: String!) 
    search(type: REPOSITORY, query: $query, first: 100) 
      edges 
        node 
          ... on Repository 
            nameWithOwner
            owner 
              login
            
          
        
      
    
  
`
// The `graphql` wrapper executes a GraphQL query and makes the results
// available on the `data` prop of the wrapped component (ReposList here)
export default graphql(searchRepos, 
  options:  variables:  query: SEARCH_QUERY , notifyOnNetworkStatusChange: true 
  
)(ReposList);

这个不带变量的查询运行良好，并按预期返回搜索结果。直截了当，对吧？

const searchRepos = gql`
search(type: REPOSITORY, query: "react", first: 100) 
   edges 
     node 
       ... on Repository 
         nameWithOwner
         owner 
           login

当使用这个时 github 返回 undefined。

const searchRepos = gql`
  query searchRepos($type: searchType!, $query: String!) 
    search(type: REPOSITORY, query: $query, first: 100) 
      edges 
        node 
          ... on Repository 
            nameWithOwner
            owner 
              login
            
          
        
      
    
  
`

【问题讨论】：

【参考方案1】：

您的查询出错了，因为您定义了一个变量$type——但您实际上并没有在查询中使用它。您不必在查询中实际发送任何变量——您可以在查询中定义一个或多个变量，然后永远不要在graphql HOC 中定义任何变量。这将是一个有效的请求，由服务器来处理未定义的变量。但是，如果您在查询本身中定义任何变量，则必须在该查询中使用它，否则查询将被拒绝。

在开发过程中，您可能会发现将data.error 记录到控制台有助于更轻松地识别您的查询问题。当查询格式不正确时，GraphQL 抛出的错误通常具有很强的描述性。

旁注：您可能不想为变量使用静态值。您可以从传递给 HOC 正在包装的组件的 props 计算您的变量（和任何其他选项）。请参阅文档中的 this section。

const options = (someProp) => (
  variables:  query: someProp, type: 'REPOSITORY' ,
   notifyOnNetworkStatusChange: true,
)
export default graphql(searchRepos, options)(ReposList)

【讨论】：

是的，

const searchRepos = gql`query searchRepos($query: String!)      search(type: REPOSITORY, query: $query, first: 100)        edges          node            ... on Repository              nameWithOwner             owner                login

工作过并且像这样整齐地传递了道具

export default graphql(searchRepos,      options: ( searchQuery ) =&gt; ( variables:  query: searchQuery  ), // compute query variable from prop     notifyOnNetworkStatusChange: true )(ReposList)

...谢谢@daniel-rearden