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!

Answer 1

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
    }
  }
`;

Answer 2

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.