react_apollo_client_graphql_usequery_with_provider_setup.ts

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import {
4  ApolloClient,
5  InMemoryCache,
6  ApolloProvider,
7  useQuery,
8  gql,
9} from '@apollo/client';
10
11// 1. Initialize ApolloClient
12const client = new ApolloClient({
13  uri: 'https://flyby-router-demo.herokuapp.com/',
14  cache: new InMemoryCache(),
15});
16
17// 2. Define your GraphQL query
18const GET_LOCATIONS = gql`
19  query GetLocations {
20    locations {
21      id
22      name
23      description
24      photo
25    }
26  }
27`;
28
29// 3. Create a component that executes the query
30function DisplayLocations() {
31  const { loading, error, data } = useQuery(GET_LOCATIONS);
32
33  if (loading) return <p>Loading...</p>;
34  if (error) return <p>Error : {error.message}</p>;
35
36  return data.locations.map(({ id, name, description, photo }: any) => (
37    <div key={id}>
38      <h3>{name}</h3>
39      <img width="400" height="250" alt="location-reference" src={`${photo}`} />
40      <br />
41      <b>About this location:</b>
42      <p>{description}</p>
43      <br />
44    </div>
45  ));
46}
47
48// 4. Wrap your App in the ApolloProvider
49const root = ReactDOM.createRoot(
50  document.getElementById('root') as HTMLElement
51);
52
53root.render(
54  <ApolloProvider client={client}>
55    <div dark-mode="true">
56      <h2>My first Apollo app 🚀</h2>
57      <DisplayLocations />
58    </div>
59  </ApolloProvider>
60);