#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 } } } } ` });