I came upon something called Apollo while building a simple ecommerce react app. For the backend product data, I decided to use graphql to easily fetch and modify data. And that's when I discovered this Apollo library which combines both React integration and GraphQL. It makes working with React and GraphQL a lot easier by giving lots of custom React hooks and features that enables the writing of GraphQL operations and executing them with JavaScript code.
Some Features
Declarative data fetching: Write a query and receive data without manually tracking loading states.
Excellent developer experience: Enjoy helpful tooling for TypeScript, Chrome DevTools, and VS Code.
Designed for modern React: Take advantage of the latest React features, such as hooks.
Incrementally adoptable: Drop Apollo into any JavaScript app seamlessly.
Universally compatible: Use any build setup and any GraphQL API.
Installation
npm install @apollo/client graphql
- @apollo/client: This package contains the main Apollo client with all essential features.
- graphql: This package provides logic for parsing GraphQL queries.
Usage
You connect Apollo Client to React with the ApolloProvider component. The ApolloProvider is similar to React's Context.Provider. It wraps your React app and places the client on the context, which enables you to access it from anywhere in your component tree.
In your app's index.js, wrap the React app with an ApolloProvider. It is advisable to put ApolloProvider above any component that might need to access GraphQL data. For example, it could be outside of your root route component if you're using React Router.
import React from 'react';
import { render } from 'react-dom';
import { ApolloProvider } from '@apollo/client';
function App() {
return (
<ApolloProvider client={client}>
<div>
<h2>My first Apollo app 🚀</h2>
</div>
</ApolloProvider>
);
}
render(<App />, document.getElementById('root'));
Requesting Data with useQuery
After hooking up ApolloProvider, you use the useQuery hook for passing the GraphQL query. useQuery is a React hook that uses the Hooks API to share GraphQL data with your UI. When your component renders and the useQuery hook runs, a result object is returned that contains loading, error, and data properties:
Apollo Client tracks error and loading state for you, which are reflected in the loading and error properties.
When the result of your query comes back, it's attached to the data property.
Example of useQuery being used with an ExchangeRates component in index.js:
import { useQuery, gql } from '@apollo/client';
const EXCHANGE_RATES = gql`
query GetExchangeRates {
rates(currency: "USD") {
currency
rate
}
}
`;
function ExchangeRates() {
const { loading, error, data } = useQuery(EXCHANGE_RATES);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return data.rates.map(({ currency, rate }) => (
<div key={currency}>
<p>
{currency}: {rate}
</p>
</div>
));
}
There are more things the Apollo Client can do like fetch queries with arguments and configuring. As well as updating data with mutations and Apollo cache. Check out the references for more in-depth information and tutorials.
References
Top comments (0)