Apollo Client TypeError: Object is not function

Question

currently I'm facing a problem while querying my Nexus GraphQL backend. In my frontend I use Apollo-boost (Apollo Client) to run queries. I tried to get data from backend in a simple example but it's not working and I can't find the problem. Am I doing something wrong? Here is my Code:

TypeError: Object(...) is not a function

 353 | 
  354 | function useBaseQuery(query, options, lazy) {
  355 |     if (lazy === void 0) { lazy = false; }
> 356 |     var context = useContext(getApolloContext());
  357 |     var _a = useReducer(function (x) { return x + 1; }, 0), tick = _a[0], forceUpdate = _a[1];
  358 |     var updatedOptions = options ? __assign(__assign({}, options), { query: query }) : { query: query };
  359 |     var queryDataRef = useRef();



 400 | }
  401 | 
  402 | function useQuery(query, options) {
> 403 |     return useBaseQuery(query, options, false);
  404 | }
  405 | 
  406 | function useLazyQuery(query, options) {

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
import ApolloClient, { gql } from 'apollo-boost';
import { ApolloProvider, Query } from 'react-apollo';


const client = new ApolloClient({
   uri: 'http://localhost:4000/graphql',
});

const GET_ALL_GENRES = gql`
   {
      getAllGenres {
         genre_id
         title
      }
   }
`;

const ExchangeRates = () => (
   <Query query={GET_ALL_GENRES}>
      {({ loading, error, data }) => {
         if (loading) return <p>Loading...</p>;
         if (error) return <p>Error :(</p>;

         console.log(data);
         return <p>Succeed</p>;
      }}
   </Query>
);

ReactDOM.render(
   <ApolloProvider client={client}>
      <BrowserRouter>
         <ExchangeRates />
      </BrowserRouter>
   </ApolloProvider>,
   document.getElementById('root'),
);
registerServiceWorker();

Or is this a known issue? react-apollo gql, TypeError: Object(...) is not a function

I tried all of the solutions but it still not working. Also the examples are from the official documentation. The only way which succeed was this approach:

client
   .query({
      query: gql`
         {
            getAllGenres {
               genre_id
               title
            }
         }
      `,
   })
   .then((result) => console.log(result));

Michael · Answer 1 · 2020-08-11T01:17:42.007

0

You are using Apollo Client 3 so Query component is deprecated. You should use useQuery instead of <Query/>.

NOTE: React Apollo's render prop components are deprecated. They will continue to receive bug fixes until March 2020, after which they will no longer be maintained by Apollo.

You can try this:

import { gql, useQuery } from '@apollo/client';
...

const GET_ALL_GENRES = gql`
   query {
      getAllGenres {
         genre_id
         title
      }
   }
`;

const ExchangeRates = () => (
  const {data, loading, error } = useQuery(GET_ALL_GENRES)
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  console.log(data);
  return <p>Succeed</p>;
);

...

edited Aug 11 '20 at 01:17

answered Aug 11 '20 at 01:08

Michael

1,806
2
11
20

Hi Michael, I also tried this approach but still the same error. I read the whole documentation and the only approach which works is the first example with client.query...then which I mentioned above. But this is not the way I want to build apps with. – wyndham007 Aug 11 '20 at 06:17
I have fixed this problem. My react version was too old. – wyndham007 Aug 11 '20 at 11:46

Apollo Client TypeError: Object is not function

1 Answers1