无法读取未定义的属性（读取“bind”）useQuery

Question

我这里有这个代码

\n

import React from "react";\n\nimport { useQuery } from "@apollo/react-hooks";\nimport gql from "graphql-tag";\n\nconst FETCH_POSTS_QUERY = gql`\n  {\n    getMovies {\n      id\n      title\n    }\n  }\n`;\n\nfunction Home() {\n  const { loading, data } = useQuery(FETCH_POSTS_QUERY);\n\n  if (data) {\n    console.log(data);\n  }\n\n  return (\n    <div>\n      <h1>Home</h1>\n    </div>\n  );\n}\n\nexport default Home;\n\n

\n

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

\n

\n

我可以看出这是由我认为 useQuery 的使用方式引起的。但我不确定出了什么问题。

\n

谢谢！

\n

Answer 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依赖会导致错误。然后我更改了它并安装@apollo/client在3.5.10版本而不是导入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最新版本。它也成功地工作了。

Answer 2

我相信问题出在 GraphQL 模式中，您缺少其中的查询。尝试使用以下架构：

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