q3e / react-native-github-graphql-app

React Native App that searches github projects and their contributors[WIP]
MIT License
2 stars 0 forks source link

Cant Form A Query with Dynamic Variables #5

Closed q3e closed 6 years ago

q3e commented 6 years ago

I dont know how to form queries with dynamic variables in graphql apollo.

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'

// 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, error, search }, searchQuery}) => {
  if(!error){
    if(loading){
      return <Text>fetching posts... </Text>
    }else {
      const responseData = search.edges
      console.log('You are searching for', searchQuery) // did we need to pass props :(
      return (
        <FlatList
          data={responseData}
          renderItem={({item}) => <Text>{item.node.nameWithOwner}</Text>}
        />
      )
    }
  }else <Text> Error Fetching posts</Text>
}
// this doesnt work
const searchRepos = gql`
  query searchRepos($type: searchType!, $query: String!) {
    search(type: REPOSITORY, query: $query, first: 100) {
      edges {
        node {
          ... on Repository {
            nameWithOwner
            owner {
              login
            }
          }
        }
      }
    }
  }
`
// This works and returns search results!!!
// const searchRepos = gql`{
//   search(type: REPOSITORY, query: "react", 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);

data from this component is undefined.

http://dev.apollodata.com/react/queries.html#graphql-options

q3e commented 6 years ago

fixed by https://github.com/bnovf/react-native-github-graphql-app/commit/f1b6fa352aa001995f6fdc9a24cd43733bd8dd47 https://github.com/bnovf/react-native-github-graphql-app/commit/084b37b67533122fb71128e4fddb92989d16364b