react-apollo

import React from 'react'; import ReactDOM from 'react-dom'; import { ApolloClient, InMemoryCache, HttpLink } from 'apollo-client'; import { ApolloProvider, useQuery, gql } from 'react-apollo'; // Create an Apollo Client instance const client = new ApolloClient({ link: new HttpLink({ uri: 'https://graphqlzero.almansi.me/api', }), cache: new InMemoryCache(), }); // Define your GraphQL query const GET_TODOS = gql` query GetTodos { todos(options: { limit: 5 }) { data { id title completed } } } `; // A React component that uses the useQuery hook function Todos() { const { loading, error, data } = useQuery(GET_TODOS); if (loading) return <p>Loading todos...</p>; if (error) return <p>Error: {error.message}</p>; return ( <div> <h2>My Todos (via react-apollo)</h2> <ul> {data.todos.data.map(({ id, title, completed }) => ( <li key={id} style={{ textDecoration: completed ? 'line-through' : 'none' }}> {title} </li> ))} </ul> </div> ); } // Render the application wrapped in ApolloProvider ReactDOM.render( <ApolloProvider client={client}> <Todos /> </ApolloProvider>, document.getElementById('root') );