How Can I correctly use dynamic variables in react-apollo graphql query?

Question

I have an apollo-wrapped component that's supposed to provide my component with response data from the github graphql v4 api. I intend to use a string(SEARCH_QUERY) from another part of the app to be used in my gql query but github keeps returning undefined. I am following offical apollo docs http://dev.apollodata.com/react/queries.html#graphql-options. I dont see what I am doing wrong.

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

This query without variables works well and returns search results as expected. straight forward, right?

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

} `

When this is used github returns undefined.

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

score 3 · Accepted Answer · answered Oct 29 '17 at 13:57

Your query is erroring out because you've defined a variable $type -- but you don't actually use it inside your query. You don't have to actually send any variables with your query -- you could define one or more in your query and then never define any inside the graphql HOC. This would be a valid request and it would be up to the server to deal with the undefined variables. However, if you define any variable inside the query itself, it has to be used inside that query, otherwise the query will be rejected.

While in development, you may find it helpful to log data.error to the console to more easily identify issues with your queries. When a query is malformed, the errors thrown by GraphQL are generally pretty descriptive.

Side note: you probably don't want to use a static values for your variables. You can calculate your variables (and any other options) from the props passed down to the component the HOC is wrapping. See this section in the docs.

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

Yeah, `const searchRepos = gql\`query searchRepos($query: String!) { search(type: REPOSITORY, query: $query, first: 100) { edges { node { ... on Repository { nameWithOwner owner { login } } } } } } ` had worked — Fatah, Oct 30 '17 at 19:47
and had passed down props neatly like so `export default graphql(searchRepos, { options: ({ searchQuery }) => ({ variables: { query: searchQuery } }), // compute query variable from prop notifyOnNetworkStatusChange: true })(ReposList)` ... thanks @daniel-rearden — Fatah, Oct 30 '17 at 19:48

How Can I correctly use dynamic variables in react-apollo graphql query?

1 Answers1