开发者问题收集

无法读取未定义的属性(读取‘bind’)useQuery

2022-05-07
4550

我有这段代码

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;

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

Picture of wrrors

我认为这是由 useQuery 的使用方式引起的。但我不确定哪里出了问题。

谢谢!

3个回答

今天我也遇到同样的问题,你使用的 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 。它也成功运行了。

Lee tata
2022-05-12

我认为问题出在 GraphQL 架构中,您缺少 query 。请尝试使用以下架构:

const FETCH_POSTS_QUERY = gql`
  query {
    getMovies {
      id
      title
    }
  }
`;
Veronika Jaghinyan
2022-05-07

由于以前的教程,我遇到了同样的问题。

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

按照 graphql 的 入门指南 中的说明进行操作,它将完美运行。

Dikembe Mutombo
2022-07-28