react_apollo_provider_usequery_graphql_exchange_rates_quickstart.ts

1import React from 'react';
2import { render } from 'react-dom';
3import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
4import { ApolloProvider, useQuery } from '@magne4000/react-apollo';
5
6const client = new ApolloClient({
7  uri: 'https://71712495.api.graphtutorial.com/graphql',
8  cache: new InMemoryCache()
9});
10
11const EXCHANGE_RATES = gql`
12  query GetExchangeRates {
13    rates(currency: "USD") {
14      currency
15      rate
16    }
17  }
18`;
19
20function ExchangeRates() {
21  const { loading, error, data } = useQuery(EXCHANGE_RATES);
22
23  if (loading) return <p>Loading...</p>;
24  if (error) return <p>Error :(</p>;
25
26  return data.rates.map(({ currency, rate }: { currency: string, rate: string }) => (
27    <div key={currency}>
28      <p>
29        {currency}: {rate}
30      </p>
31    </div>
32  ));
33}
34
35const App = () => (
36  <ApolloProvider client={client}>
37    <div>
38      <h2>My first Apollo app 🚀</h2>
39      <ExchangeRates />
40    </div>
41  </ApolloProvider>
42);
43
44render(<App />, document.getElementById('root'));