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

Question

我有一个 apollo 包装的组件，它应该为我的组件提供来自 github graphql v4 api 的响应数据。我打算在我的 gql 查询中使用应用程序另一部分的字符串 (SEARCH_QUERY)，但 github 一直返回 undefined。我正在关注官方 apollo 文档 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);

这个不带变量的查询运行良好，returns 搜索结果符合预期。直截了当，对吗？

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

} `

使用时 github returns undefined.

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

Answer 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)

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

How Can I correctly use dynamic variables in react-apollo graphql query?

react-native

graphql

react-apollo

apollo-client

github-graphql