react-apollo getClient is undefined

Question

There appears to be an error with how I'm using react-apollo. Following the docs, I am attempting to make a basic query with Apollo. This is the error I get in the browser when on the Review page. It appears that this.getClient is undefined and unable to call watchQuery.

react-apollo.browser.umd.js:417 Uncaught TypeError: this.getClient(...).watchQuery is not a function
at GraphQL.createQuery (react-apollo.browser.umd.js:417)
at GraphQL.setInitialProps (react-apollo.browser.umd.js:404)
at GraphQL.componentWillMount (react-apollo.browser.umd.js:260)
etc...

Here is the code for the Review page. I create a Review React Component, declare a graphql-tag that calls the userInfo query, and export the graphql tag connected to the Review page below.

import React from 'react'
import { graphql } from 'react-apollo';
import gql from 'graphql-tag'

class Review extends React.Component {...}

const userInfoQuery = gql`
query userInfoQuery{
  userInfo {
    _id
    email
    name {
      first
      last
    }
    isVerified
  }
}`

const ReviewWithData = graphql(userInfoQuery)(Review)
export default ReviewWithData;

It's hard to tell from the code you posted. Do you have more relevant code? Also, did you use the ApolloProvider component? apollographql.com/docs/react/basics/… — Tal Z

Tori Huang Tori Huang · Accepted Answer · 2018-02-19T22:44:24

The issue was I was defining the wrong client in the root index.js file. So for the code below, the client I was exporting was not actually the correct Apollo client. So the variable client on the sixth import was importing some other functions. Lesson learned! Should have been more careful!

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo';

import App from './containers/app';
import client from './services/Apollo'

const CustomerFrontendApp = (
  <ApolloProvider client={BitsyApollo.client}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ApolloProvider>
);

render(BitsyCustomerFrontendApp, document.getElementById('root'));

react-apollo getClient is undefined

1 Answers