Возникли ошибки при попытке выполнить запрос с помощью Apollo (Компонент класса React Типовой текст)

#reactjs #typescript #apollo-client

Вопрос:

Я создаю проект с компонентами класса React Typescript Apollo-клиент. У меня ошибка, когда я пытаюсь выполнить запрос. Я предоставил изображения с ошибками и полный код.

Ошибка в атрибуте запроса

Ошибка в компоненте запроса

Запрос, который я пытаюсь получить

Файл кода, который я пытаюсь получить

 import { QueryResult } from "@apollo/client"; import React from "react"; import { Query } from "react-apollo";  import { GET_PRODUCTS } from "../../index";  interface Products {  loading: object;  error: Error;  data: [  {  name: string;  gallery: [string];  prices: [  {  currency: string;  amount: number;  }  ];  }  ]; }  interface ProductsData {  products: Products[]; }  export class GridProducts extends React.Componentlt;{}, Productsgt; {  render() {  return (  lt;Query query={GET_PRODUCTS}gt;  {(result: QueryResult) =gt; {  const { loading, error, data } = result;  if (loading) return lt;pgt;Loading...lt;/pgt;;  if (error) return lt;pgt;Error!lt;/pgt;;   return (  lt;divgt;  {data.map((product: any) =gt; {  return lt;divgt;{product.name}lt;/divgt;;  })}  lt;/divgt;  );  }}  ;  lt;/Querygt;  );  } }  

Запрос, который я пытаюсь получить

 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; import React from 'react'; import ReactDOM from 'react-dom'; import { App } from './App';  import {gql} from '@apollo/client'   export const client = new ApolloClient({  uri: "http://localhost:4000/",  cache: new InMemoryCache(), });   export const GET_PRODUCTS = client.querylt;anygt;({  query: gql`  query Query {  category {  products {  gallery  name  prices {  currency  amount  }  }  }  }   ` });