React Apollo Client useQuery Hook gql Uncaught TypeError: (...) не является функцией

Question

Итак, я хочу использовать ловушку реагирования клиента Apollo «useQuery» для запроса моего бэкэнда graphql, на котором запущен сервер Apollo.

Но определенный констант запроса вернет мне ошибку: Uncaught TypeError :(. ..) не является функцией, и поэтому страница вообще не отображается.

Моя настройка ApolloClient и Provider выглядит следующим образом:

index. js:

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { ApolloLink, from } from 'apollo-link';
import { ApolloProvider } from 'react-apollo';
import { createUploadLink } from 'apollo-upload-client';

import 'bootstrap/dist/css/bootstrap.min.css';
import App from './components/App';
import './index.css';

const uploadLink = createUploadLink({ uri: process.env.REACT_APP_API_URL });
const httpLink = new HttpLink({
  uri: process.env.REACT_APP_API_URL,
  credentials: 'same-origin'
});
const cache = new InMemoryCache();

const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors)
        graphQLErrors.forEach(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
          )
        );
      if (networkError) console.log(`[Network error]: ${networkError}`);
    }),
    httpLink,
    uploadLink
  ]),
  cache,
  uri: process.env.REACT_APP_API_URL
});

render(
  <ApolloProvider client={client}>
    <Router>
      <App />
    </Router>
  </ApolloProvider>,
  document.getElementById('app')
);

И компонент приложения вызовет запрос:

компонентов / игры / GamePage. js:

import React, { Component } from 'react';
// import GameForm from './gameform';
import GameRules from './gamerules';
// import PropTypes from 'prop-types';

import { gql } from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';

class GamePage extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);

    this.GET_ALL_PLAYERS = gql`
      query allPlayers {
        allPlayers {
          id
          name
          nickname
        }
      }
    `;
  }
  state = { selectedGame: 'X01' };

  componentDidMount() {
    // const players = this.props;
    // players.loadPlayers().catch(err => {
    //   alert('Loading players failed. ' + err);
    // });

    const { loading, error, data } = useQuery(this.GET_ALL_PLAYERS);

    if (loading) console.log('Loading...');
    if (error) console.log(`Error! ${error.message}`);
    console.log(data);
  }

  handleSubmit = gameObject => {
    console.log(gameObject);
    // this.props.createGame(gameObject);
  };

  handleGameChange = game => {
    this.setState({
      selectedGame: game
    });
  };

  render() {
    const styles = {
      margin: '20px'
    };

    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-6">
            <h2 style={styles}>Game Setup</h2>
            {/* <GameForm
              players={this.props.players}
              onSubmit={this.handleSubmit}
              onGameChange={this.handleGameChange}
            /> */}
          </div>
          <div className="col-md-6">
            <h2 style={styles}>Game Rules</h2>
            <GameRules game={this.state.selectedGame} />
          </div>
        </div>
      </div>
    );
  }
}

// GamePage.propTypes = {
//   players: PropTypes.array,
//   games: PropTypes.array,
//   createGame: PropTypes.func.isRequired
// };

export default GamePage;

И при загрузке приложения, я получу ошибку, упомянутую выше. Я следовал как каждый учебник, который я мог найти в течение 2 часов, гуглинг и youtubing. Но я не могу решить это сам. Кроме того, бэкэнд работает очень хорошо. Протестировал его с помощью инструмента тестирования веб-сервера ApolloServer.

Обсуждаемая часть такова:

this.GET_ALL_PLAYERS = gql`
  query playersList {
    allPlayers {
      id
      name
      nickname
    }
  }
`;

Вот изображения полученной мной ошибки:

Так что любая помощь будет оценена. Спасибо

---

Редактировать: новая ошибка после изменения импорта {gql} на gql

Answer 1

Трудно понять наверняка, не увидев полную ошибку, включая трассировку, но я подозреваю, что вы неправильно импортируете from. Модуль apollo-link экспортирует класс с именем ApolloLink, но у этого класса нет метода stati c с именем from. Вместо этого вы ищете другой именованный экспорт из того же модуля:

import { from } from 'apollo-link'

Также обратите внимание, что модуль react-apollo-hooks устарел, поскольку API-интерфейс ловушек теперь является частью react-apollo. Вам следует обновить react-apollo и использовать только один ApolloProvider для хуков и любых устаревших компонентов.

РЕДАКТИРОВАТЬ:

Если посмотреть на вашу ошибку, проблема заключается в конструкторе GamePage (уведомление первая строка at new GamePage). Опять же, здесь проблема с импортом, потому что graphql-tag не имеет именованного импорта с именем gql. Этот модуль имеет экспорт по умолчанию только как показано в документации:

import gql from 'graphql-tag'