어떻게 react-apollo graphql 쿼리에서 동적 변수를 올바르게 사용할 수 있습니까?

Question

github graphql v4 api의 응답 데이터를 내 구성 요소에 제공하기로되어있는 apollo-wrapped 구성 요소가 있습니다. 내 gql 쿼리에 사용되는 응용 프로그램의 다른 부분에서 문자열 (SEARCH_QUERY)를 사용하려고하지만 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);

변수없이이 쿼리는 잘 작동하고 예상대로 반환 검색 결과를

. 똑바로, 그렇지? 이 github에 사용되는

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

} `

는 undefined를 반환합니다. 하지만 실제로 쿼리 내에서 사용하지 마십시오 - 당신이 $type 변수를 정의했기 때문에

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

조회에서 밖으로 erroring된다. 실제로 쿼리에 변수를 보낼 필요가 없습니다. 쿼리에 하나 이상의 변수를 정의한 다음 HOC 내에 어떤 변수도 정의 할 수 없습니다. 이것은 유효한 요청이며 정의되지 않은 변수를 처리하는 것은 서버에 달려 있습니다. 그러나 쿼리 자체에 변수를 정의하면 해당 쿼리 내에서 변수를 사용해야합니다. 그렇지 않으면 쿼리가 거부됩니다.

개발 중에 쿼리에 대한 문제를보다 쉽게 ​​식별 할 수 있도록 data.error을 콘솔에 기록하면 도움이 될 수 있습니다. 쿼리가 잘못된 경우, GraphQL에 의해 던져진 오류는 일반적으로 매우 설명적입니다.

사이드 노트 : 아마도 변수에 정적 값을 사용하고 싶지 않을 것입니다. HOC가 래핑하는 구성 요소로 전달 된 소품의 변수 (및 기타 옵션)를 계산할 수 있습니다. 문서의 this section을 참조하십시오. `쿼리 searchRepos \

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