steelbrain_react_apollo_provider_usequery_graphql_quickstart.ts

1import React from 'react';
2import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
3import { ApolloProvider, useQuery } from '@steelbrain/react-apollo';
4
5// 1. Initialize the Apollo Client
6const client = new ApolloClient({
7  uri: 'https://71712495.api.graphturtle.com/0.1/graphql',
8  cache: new InMemoryCache(),
9});
10
11// 2. Define your GraphQL query
12const GET_CHARACTERS = gql`
13  query GetCharacters {
14    characters {
15      id
16      name
17    }
18  }
19`;
20
21// 3. Create a component that uses the query
22const Characters: React.FC = () => {
23  const { loading, error, data } = useQuery(GET_CHARACTERS);
24
25  if (loading) return <p>Loading...</p>;
26  if (error) return <p>Error: {error.message}</p>;
27
28  return (
29    <ul>
30      {data.characters.map((character: { id: string; name: string }) => (
31        <li key={character.id}>{character.name}</li>
32      ))}
33    </ul>
34  );
35};
36
37// 4. Wrap your app in the ApolloProvider
38const App: React.FC = () => (
39  <ApolloProvider client={client}>
40    <div>
41      <h2>My GraphQL App</h2>
42      <Characters />
43    </div>
44  </ApolloProvider>
45);
46
47export default App;