Error: graphql operation failed Error: Unable to find any GraphQL type definitions for the following pointers: - graphql

[ghost]

I am trying to run the below graphql script however, each time I excute the gql`` , it throws this error Error: graphql operation failed Error: Unable to find any GraphQL type definitions for the following pointers: - graphql.

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

const PLANETS = gql `{ planets 
                                       { cuisine 
                                         id 
                                         name } }`

export default function Planets() {
const { loading, error, data } = useQuery(PLANETS);

if (loading) return <p>Loading...</p>
if (error) return <p>Error :(</p>

return data.PLANETS.map(({ id, name, cuisine}) => (
    <div key={id}>
        <p>
            {name} | {cuisine}
        </p>
    </div>
));
}

import React from 'react';
import { render } from 'react-dom';
import { ApolloProvider } from '@apollo/client';
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
import Planets from './components/Planets';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  Link: new HttpLink({
    uri: 'https://mamoun-app.herokuapp.com/v1/graphql',
  })
});

const App = () => (
  <ApolloProvider client={client}>
    <Planets />
  </ApolloProvider>
);

render(<App />, document.getElementById('root'));

I also tried to import gql from 'graphql-tag' and I still get the same error