React apollo multiple query in redux action

Question

When I'm trying to do two different query I get this error how do I fix it

``Error: query option is required. You must specify your GraphQL document in the query option.

Here's a snippet of the code

//in my index class I dispatch some actions

componentDidMount () {
 this.props.fetchNavigationBarDataThunk();
 this.props.fetchActionToDoTitleDataThunk();
} 

//then in my action I have something like that 

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import gql from 'graphql-tag';

const opts = {uri: 'http://localhost:8080/wfgen/graphql'};
const networkInterface = createNetworkInterface(opts);
const client = new ApolloClient({networkInterface});

var query1 = gql`query {...}`;

var query2= gql`query {...}`;


export function fetchActionToDoTitleDataThunk () {
return (dispatch) => {
dispatch(fetchActionToDoTitleData())
client.query({ query2 }).then((results) => {
  if (results.networkStatus === 7 && results.loading === false) {
    dispatch(fetchActionToDoTitleDataFulFilled(results));
  }
  else{
  ...


export function fetchNavigationBarDataThunk () {
return (dispatch) => {

dispatch(fetchNavigationBarData())
client.query({query}).then((results) => {
  if (results.networkStatus === 7 && results.loading === false) {
    dispatch(fetchNavigationBarDataFulFilled(results));
  }
  else{
 ....

Tyler Sebastian Tyler Sebastian · Accepted Answer · 2017-06-30T17:58:37

I think your issue here is with this client.query({ query2 }) and client.query({query})

first, using shorthand object property initialization, { query2 } is equivalent to { query2: query2 } - but ApolloClient expects something like { query: query2 }.

second, based off the code that you've provided, query is undefined. I think you mean either client.query({query: query1}) or client.query({query: query2})

React apollo multiple query in redux action

1 Answers