Как я могу правильно использовать динамические переменные в запросеарно-apollo graphql?

Question

У меня есть завернутый в apollo компонент, который должен предоставить моему компоненту данные ответа из API github graphql v4. Я намерен использовать строку (SEARCH_QUERY) из другой части приложения, которая будет использоваться в моем запросе gql, но github продолжает возвращаться undefined, Я следую за официальными документами apollo http://dev.apollodata.com/react/queries.html. Я не вижу, что я делаю неправильно.

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
            }
          }
        }
      }
    }
  }
`

Answer 1

Ваш запрос не выполняется, потому что вы определили переменную $type - но вы на самом деле не используете его внутри своего запроса. Вам не нужно отправлять какие-либо переменные с вашим запросом - вы можете определить одну или несколько переменных в своем запросе, а затем никогда не определять их внутри graphql HOC. Это будет действительный запрос, и сервер будет иметь дело с неопределенными переменными. Однако если вы определяете какую-либо переменную внутри самого запроса, она должна использоваться внутри этого запроса, в противном случае запрос будет отклонен.

В процессе разработки может оказаться полезным войти в систему. data.error в консоль, чтобы легче идентифицировать проблемы с вашими запросами. Когда запрос искажен, ошибки, выдаваемые GraphQL, обычно довольно описательны.

Примечание: вы, вероятно, не хотите использовать статические значения для ваших переменных. Вы можете вычислить свои переменные (и любые другие параметры) из реквизита, переданного компоненту, который обертывает HOC. Смотрите этот раздел в документации.

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