Wie kann ich dynamische Variablen in react-apollo graphql-Abfrage korrekt verwenden?

Question

Ich habe eine apollo-ummantelte Komponente, die meine Komponente mit Antwortdaten aus der Github Graphql v4 API liefern soll. Ich beabsichtige, eine Zeichenfolge (SEARCH_QUERY) von einem anderen Teil der App zu verwenden, die in meiner gql-Abfrage verwendet werden soll, aber github gibt immer undefined zurück. Ich folge apical apollo docs http://dev.apollodata.com/react/queries.html#graphql-options. Ich sehe nicht, was ich falsch mache.

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

Diese Abfrage ohne Variablen funktioniert gut und liefert Ergebnisse zu suchen, wie erwartet. geradeaus, oder?

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

} `

Wenn diese Github verwendet wird gibt undefined zurück.

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

Ihre Anfrage wird erroring, weil Sie eine $type Variable definiert haben - aber Sie eigentlich nicht in Ihrer Abfrage verwenden. Sie müssen nicht wirklich irgendwelche Variablen mit Ihrer Abfrage senden - Sie könnten eine oder mehrere in Ihrer Abfrage definieren und dann keine innerhalb der graphql HOC definieren. Dies wäre eine gültige Anfrage und es wäre Aufgabe des Servers, sich mit den undefinierten Variablen zu befassen. Wenn Sie jedoch eine Variable innerhalb der Abfrage selbst definieren, muss sie innerhalb dieser Abfrage verwendet werden, andernfalls wird die Abfrage zurückgewiesen.

Während der Entwicklung kann es hilfreich sein, data.error an der Konsole zu protokollieren, um Probleme mit Ihren Abfragen leichter zu erkennen. Wenn eine Abfrage fehlerhaft ist, sind die von GraphQL geworfenen Fehler im Allgemeinen ziemlich beschreibend.

Seitliche Anmerkung: Sie möchten wahrscheinlich keine statischen Werte für Ihre Variablen verwenden. Sie können Ihre Variablen (und alle anderen Optionen) aus den Requisiten berechnen, die an die Komponente übergeben werden, die das HOC umhüllt. Siehe this section in den Dokumenten.

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