无法读取未定义的属性（读取“绑定”）useQuery答案

【问题标题】：Cannot read properties of undefined (reading 'bind') useQuery无法读取未定义的属性（读取“绑定”）useQuery
【发布时间】：2022-07-28 21:21:37
【问题描述】：

我这里有这段代码

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;

当我运行它时，我的控制台中出现了很多错误。我不确定我做错了什么。

我可以说这是由于我认为 useQuery 的使用方式造成的。不过我不确定是什么问题。

谢谢！

【问题讨论】：

标签： reactjs graphql apollo-client react-apollo graphql-js

【解决方案1】：

我今天遇到了同样的问题，你使用的useQuery的方式是正确的。

这是我在ApolloProvider 组件中的原始代码：

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>
)

我发现使用apollo-client 依赖会导致错误。然后我对其进行了更改并在 3.5.10 版本中安装了@apollo/client，而不是导入ApolloClient。它终于可以正常工作了。

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';

此外，我还尝试在最新版本中使用@apollo/client。它也很成功。

【讨论】：

【解决方案2】：

我认为问题出在 GraphQL 架构中，您在其中缺少 query。尝试使用以下架构：

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

【讨论】：

【解决方案3】：

由于一个旧教程，我遇到了同样的问题。

我以错误的方式配置了我的 Apollo 客户端。

按照 graphql 的get started guide 中所述执行相同的操作，它将完美运行。

【讨论】：