Cannot read properties of undefined (reading 'bind') useQuery

Question

I have this code right here

import React from "react";

import { useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";

const FETCH_POSTS_QUERY = gql`
  {
    getMovies {
      id
      title
    }
  }
`;

function Home() {
  const { loading, data } = useQuery(FETCH_POSTS_QUERY);

  if (data) {
    console.log(data);
  }

  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}

export default Home;

and when I'm running it I get lots of errors in my console. I'm not sure what I’m doing wrong.

I can tell it's caused by how useQuery is used i think. I'm not sure what's wrong though.

thanks!

Lee tata · Accepted Answer · 2022-05-16 14:15:17Z

9

I faced the same problem today, the way of useQuery that you used is correct.

This is my original code in ApolloProvider component:

import React from 'react';
import App from './App';
import { ApolloProvider } from '@apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
import ApolloClient from 'apollo-client';

const httpLink = new createHttpLink({
    uri: "http://localhost:5000"
})

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
})

export default(
    <ApolloProvider client={ client }>
        <App />
    </ApolloProvider>
)

I found using apollo-client dependency would cause the errors. Then I changed it and installed @apollo/client at 3.5.10 version instead to import ApolloClient. And It finally works fine.

import React from 'react';
import App from './App';

import { ApolloProvider } from '@apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
// import ApolloClient from 'apollo-client';
import { ApolloClient } from '@apollo/client';

In addition, I've also tried to use @apollo/client at the newest version. It worked successfully as well.

edited May 16, 2022 at 14:15

answered May 12, 2022 at 19:41

Lee tata

914 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent Caruso Over a year ago

I did the same, but also had to upgrade @apollo/react-hooks (I upgraded both packages to the newest)

Veronika Jaghinyan · Accepted Answer · 2022-05-07 20:43:53Z

3

I believe the issue is in the GraphQL schema, you are missing query in it. Try using the following schema:

const FETCH_POSTS_QUERY = gql`
  query {
    getMovies {
      id
      title
    }
  }
`;

answered May 7, 2022 at 20:43

Veronika Jaghinyan

312 bronze badges

Comments

Marc Thieme · Accepted Answer · 2022-07-28 13:21:37Z

1

I faced the same problem because of an old tutorial.

I configured my Apollo client in the wrong way.

Do the same as described in the get started guide from graphql and it will work perfect.

answered Jul 28, 2022 at 13:21

Marc Thieme

1481 silver badge9 bronze badges

Collectives™ on Stack Overflow

Cannot read properties of undefined (reading 'bind') useQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related