So I want to use the Apollo Client react hook useQuery to query my graphql backend running Apollo Server.

But the defined query const of will return me an error which is: Uncaught TypeError:(...) is not a function and thus the page is not rendering at all.

My ApolloClient and Provider Setup is as follows:

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

);

And the App Component will trigger the query:

components/game/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;

And when loading the App it will get me the error mentioned above. I followed like every tutorial I could find within 2 hours googeling and youtubing. But I cannot resolve it myself. Backend is working just fine besides. Tested it with ApolloServer's Webserver testing tool.

The part in question is this:

this.GET_ALL_PLAYERS = gql`

  query playersList {

    allPlayers {

      id

      name

      nickname

    }

  }

`;

Here are Images of the error I am getting:

So any help will be appreciated.
Thanks

Edit: new error after changing {gql} import to gql