Apollo Client TypeError: Object is not function

Question

目前我在查询 Nexus GraphQL 后端时遇到问题。在我的前端，我使用 Apollo-boost (Apollo Client) 来运行查询。我试图在一个简单的示例中从后端获取数据，但它不起作用，我找不到问题。难道我做错了什么？这是我的代码：

TypeError: Object(...) 不是函数

 353 | 
  354 | function useBaseQuery(query, options, lazy) {
  355 |     if (lazy === void 0) { lazy = false; }
> 356 |     var context = useContext(getApolloContext());
  357 |     var _a = useReducer(function (x) { return x + 1; }, 0), tick = _a[0], forceUpdate = _a[1];
  358 |     var updatedOptions = options ? __assign(__assign({}, options), { query: query }) : { query: query };
  359 |     var queryDataRef = useRef();



 400 | }
  401 | 
  402 | function useQuery(query, options) {
> 403 |     return useBaseQuery(query, options, false);
  404 | }
  405 | 
  406 | function useLazyQuery(query, options) {

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
import ApolloClient, { gql } from 'apollo-boost';
import { ApolloProvider, Query } from 'react-apollo';


const client = new ApolloClient({
   uri: 'http://localhost:4000/graphql',
});

const GET_ALL_GENRES = gql`
   {
      getAllGenres {
         genre_id
         title
      }
   }
`;

const ExchangeRates = () => (
   <Query query={GET_ALL_GENRES}>
      {({ loading, error, data }) => {
         if (loading) return <p>Loading...</p>;
         if (error) return <p>Error :(</p>;

         console.log(data);
         return <p>Succeed</p>;
      }}
   </Query>
);

ReactDOM.render(
   <ApolloProvider client={client}>
      <BrowserRouter>
         <ExchangeRates />
      </BrowserRouter>
   </ApolloProvider>,
   document.getElementById('root'),
);
registerServiceWorker();

或者这是一个已知问题？ react-apollo gql, TypeError: Object(...) is not a function

我尝试了所有解决方案，但仍然无法正常工作。示例也来自官方文档。唯一成功的方法是这种方法：

client
   .query({
      query: gql`
         {
            getAllGenres {
               genre_id
               title
            }
         }
      `,
   })
   .then((result) => console.log(result));

Answer 1

您正在使用 Apollo Client 3，所以 Query component 是 deprecated。您应该使用useQuery 而不是<Query/>。

注意：React Apollo 的渲染道具组件已被弃用。他们将继续收到错误修复，直到 2020 年 3 月，之后他们将不再由 Apollo 维护。

你可以试试这个：

import { gql, useQuery } from '@apollo/client';
...

const GET_ALL_GENRES = gql`
   query {
      getAllGenres {
         genre_id
         title
      }
   }
`;

const ExchangeRates = () => (
  const {data, loading, error } = useQuery(GET_ALL_GENRES)
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  console.log(data);
  return <p>Succeed</p>;
);

...