TypeError: Cannot read properties of undefined (reading 'watchQuery')

Question

I try to make graphql connection from react app. My index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ApolloProvider } from '@apollo/client'
import { createClient } from 'graphql-ws';

const client = createClient({
  url: '<some url>',
  connectionParams: {
    authToken: '<some token>',
  },
});

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

My App.js:

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


const QUERY = gql`query SomeName{
  test_tablesList {
    items {
      id
      num
    }
  }
}`;


function App() {
  const { data, loading } = useQuery(QUERY);
  return (
    <h1>Hi there</h1>
  );
}

export default App;

When I run it console argues:

useQuery.ts:31 Uncaught TypeError: Cannot read properties of undefined (reading 'watchQuery') at useQuery (useQuery.ts:31:1) at App (App.js:25:1)

react-dom.development.js:18525 The above error occurred in the component:

at App (http://localhost:3000/main.cf5965058b2b7700d166.hot-update.js:48:63)
at ApolloProvider (http://localhost:3000/static/js/bundle.js:51749:19)

What do I do wrongly?

Answer 1

My error is here - import { createClient } from 'graphql-ws'; I had to take it from Apollo client.