どのようにして、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 
     } 
     } 
    } 
    } 
} 

} `

は未定義返します。しかし、あなたが実際にあなたのクエリ内でそれを使用しないでください - あなたは$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れます。実際には、クエリに変数を送信する必要はありません。クエリに1つまたは複数の変数を定義し、HOC内に決して定義することはできません。これは有効な要求であり、未定義の変数を処理するのはサーバーの責任です。ただし、クエリ自体の内部に変数を定義する場合は、そのクエリ内で変数を使用する必要があります。そうでない場合、クエリは拒否されます。

開発中に、data.errorをコンソールに記録すると、クエリの問題をより簡単に特定できます。クエリの形式が誤っていると、GraphQLによってスローされたエラーは一般的にかなり記述的です。

サイドノート：おそらく、変数に静的な値を使用したくないでしょう。 HOCがラッピングするコンポーネントに渡された小道具から変数（および他のオプション）を計算することができます。ドキュメントのthis sectionを参照してください。

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