React-apollo: watchQuery is not a function

[zyl-edison-telus]

I have asked the question based on the watchQuery undefined on stackoverflow. But I will ask again here.

Basically, I got an error says 'this.client.watchQuery is not a function' during SSR. My sample code looks like this

// AppServer.js
<ApolloProvider client={apolloClient}>
  <StaticRouter ...>
    <App />
  </StaticRouter ...>
</ApolloProvider>

// App.js
const App = () => {
    <Switch>
      <Route path="/" render={() => <Component />}>
    </Switch>
}

// Component.js
const Component = () => {
    <Switch>
      <Route path="/" render={() => <SubComponent />}>
    </Switch>
}

// SubComponent.js
const SubComponent = () => {
   <Query query={query}>
     {() => {...}}
   </Query>
}

I got an error says this.client.watchQuery is not a function from line 372 in react-apollo.cjs.js. However, if I move the Query component into a upper level component. In my case is component.js, then it will work and watchQuery is a function. I am wondering why moving between component can cause such weird behaviour. What I missed or What did I do wrong?

Please help. Thanks

[MattSidor]

Hey @zyl-edison-telus, I'm having a similar issue. Did you ever find a solution to your problem?

[danielharrison]

me too - as of this morning

[sakhmedbayev]

@zyl-edison-telus, have you managed to resolve it?

[zyl-edison-telus]

Ok, my problem is the client property from apollo provider. It is overwrote by other provider which also has the same property name called client. It would be nice if apollo can let us define an alias

[cryptedx]

How did you fix it? Can you please describe it for me and other users? I have the same problem.

[alihuber]

If anyone ever encounters this: I was getting this exact same error in a vanilla CRA-app, and the cause was that I had some imports wrong in files that contained queries/mutations:

import gql from 'apollo-boost
instead of
import { gql } from apollo-boost
🤦

[cryptedx]

I checked all my imports:

import { gql } from '@apollo/client'

All are like this but the problem still persists.

[ramshadnk]

@cryptedx @sakhmedbayev @zyl-edison-telus ::-> 1. Apollo queries should be wrapped in ApooloProvider to connect react with apollo.

A)const client = async () => {
    const client = new ApolloClient({
        link,
        cache,
        defaultOptions,
    });
    return client;
};
const apolloClient = client();
<ApolloProvider client={apolloClient}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
</ApolloProvider>

you might be getting this error because of an issue in the apolloClient. for me it was throwing the error because my apolloClient was a fn that returns a promise(mentioned in A). so even before the promise is resolved, the useQuery hook is trying to be executed, but the ApolloProvider doesn't have the client resolved yet(which have the essential fns like WatchQuery() to handle useQuery hook, so it returns an error).
i removed the async from the client then my error is fixed, since the apollo client is readily available for the provider.