GraphQL with React
Apollo Client, queries, mutations, subscriptions, and caching strategies.
Overview
GraphQL provides a flexible query language for APIs with Apollo Client as the React implementation.
Key Concepts
- Apollo Client â GraphQL client with React hooks
- Queries â Fetch data with useQuery
- Mutations â Modify data with useMutation
- Subscriptions â Real-time updates with useSubscription
- Cache â Normalized cache with automatic updates
Code Examples
import { ApolloClient, InMemoryCache, gql, useQuery, useMutation } from '@apollo/client';
const GET_POSTS = gql`
query GetPosts($limit: Int) {
posts(limit: $limit) {
id
title
author { name }
}
}
`;
const CREATE_POST = gql`
mutation CreatePost($input: PostInput!) {
createPost(input: $input) {
id
title
}
}
`;
function PostList() {
const { loading, error, data } = useQuery(GET_POSTS, { variables: { limit: 10 } });
if (loading) return <Spinner />;
if (error) return <ErrorMessage error={error} />;
return (
<ul>
{data.posts.map(post => (
<li key={post.id}>
<h3>{post.title}</h3>
<p>By {post.author.name}</p>
</li>
))}
</ul>
);
}
function CreatePostForm() {
const [createPost, { loading }] = useMutation(CREATE_POST, {
refetchQueries: [{ query: GET_POSTS }],
});
const handleSubmit = async (e) => {
e.preventDefault();
await createPost({ variables: { input: { title: e.target.title.value } } });
e.target.reset();
};
return (
<form onSubmit={handleSubmit}>
<input name="title" required />
<button type="submit" disabled={loading}>Create</button>
</form>
);
}
Practice
Build a real-time comment system with GraphQL subscriptions.