Keystone is a system that wraps the application’s data with a CMS backend so that the data can be maintained with an access control in place. The system works by providing a GraphQl API to deliver the data to the frontend. In this article, we describe how we can connect and consume the Keystone GraphQl API.
Setup a React Client
npx create-react-app keystone-graphql-client
Install Apollo for React to pull GraphQl data
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: graphqlEndpoint, cache: new InMemoryCache() }); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <ApolloProvider client={client}> <App /> </ApolloProvider> </React.StrictMode> );
Call a specific query with Apollo
import React from "react";
import { useQuery, gql } from "@apollo/client";

const ATTRIBUTE_QUERY = gql`
{
woocommerceAttributes {
id
code
name
type
required
}
}
`;

export default function Attributes() {
const { data, loading, error } = useQuery(ATTRIBUTE_QUERY);

if (loading) return "Loading...";
if (error) return <pre>{error.message}</pre>

return (
<div>
<h1>Attribute List</h1>
<ul>
{data.woocommerceAttributes.map((attribute) => (
<li key={attribute.id}>name: {attribute.name}, type: {attribute.type}</li>
))}
</ul>
</div>
);
}