GraphQL Mutations in Apollo Client - #12
#GraphQL #ApolloClient #GraphQLMutations #WebDevelopment #FrontendDevelopment #JavaScript #ReactJS #Programming #Coding #WebDev #API #SoftwareDevelopment #Tech #Developer #CodingLife #LearnToCode #FullStackDevelopment #GraphQLTutorial #ApolloClientGuide #GraphQLAPI
Handling GraphQL mutations in Apollo Client involves setting up your Apollo Client, writing your mutation, and then executing it within your React components or any other JavaScript code. Here’s a detailed guide to get you started:
1. Setting Up Apollo Client
First, ensure you have Apollo Client installed in your project. You can do this using npm or yarn:
npm install @apollo/client graphql
or
yarn add @apollo/client graphql
Next, configure the Apollo Client:
import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink } from '@apollo/client';
const client = new ApolloClient({
link: new HttpLink({ uri: 'https://your-graphql-endpoint.com/gra... }),
cache: new InMemoryCache(),
});
// Then wrap your application with the ApolloProvider component
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
ApolloProvider client={client}
App /
/ApolloProvider,
document.getElementById('root')
);
2. Writing a GraphQL Mutation
Define your mutation using the gql template literal tag provided by Apollo Client:
import { gql } from '@apollo/client';
const CREATE_USER = gql`
mutation CreateUser($name: String!, $email: String!) {
createUser(input: { name: $name, email: $email }) {
user {
id
name
email
}
}
}
`;
3. Executing the Mutation
Use the useMutation hook provided by Apollo Client to execute the mutation within a React component:
Code :
import React, { useState } from 'react';
import { useMutation } from '@apollo/client';
import { CREATE_USER } from './mutations';
const CreateUser = () = {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [createUser, { data, loading, error }] = useMutation(CREATE_USER);
const handleSubmit = (e) = {
e.preventDefault();
createUser({ variables: { name, email } });
};
if (loading) return pLoading.../p;
if (error) return pError :(/p;
return (
div
form onSubmit={handleSubmit}
input
type="text"
placeholder="Name"
value={name}
onChange={(e) = setName(e.target.value)}
/
input
type="email"
placeholder="Email"
value={email}
onChange={(e) = setEmail(e.target.value)}
/
button type="submit"Create User/button
/form
{data && (
div
pUser created successfully!/p
pName: {data.createUser.user.name}/p
pEmail: {data.createUser.user.email}/p
/div
)}
/div
);
};
export default CreateUser;
4. Handling Response and Errors
The useMutation hook returns an array with the mutate function and an object that contains the mutation state. This object includes data, loading, and error properties.
data: Contains the mutation response data.
loading: Indicates if the mutation is in progress.
error: Contains any errors returned by the server.
5. Optimistic UI Updates
You can provide an optimisticResponse to immediately reflect the mutation result in the UI, even before the server responds:
Code :
const [createUser] = useMutation(CREATE_USER, {
optimisticResponse: {
createUser: {
user: {
id: 'temp-id',
name,
email,
__typename: 'User'
}
}
}
});
6. Updating the Cache
You can update the Apollo Client cache after a mutation to keep the UI in sync:
Code :
const [createUser] = useMutation(CREATE_USER, {
update(cache, { data: { createUser } }) {
cache.modify({
fields: {
users(existingUsers = []) {
const newUserRef = cache.writeFragment({
data: createUser.user,
fragment: gql`
fragment NewUser on User {
id
name
email
}
`
});
return [...existingUsers, newUserRef];
}
}
});
}
});
Conclusion
Handling GraphQL mutations in Apollo Client involves setting up the Apollo Client, writing and executing mutations, handling responses and errors, and optionally optimizing UI updates and updating the cache. By following these steps, you can effectively manage data changes in your React application using GraphQL and Apollo Client.
Chapter :
00:00 GraphQL Mutations in Apollo Client
00:11 Setting Up Apollo Client
01:10 Writing a GraphQL Mutation
01:35 Executing the Mutation
02:03 Handling Response and Errors
02:46 Optimistic UI Updates
03:09 Updating the Cache
03:52 Conclusion
Thank you for watching this video
EVERYDAY BE CODING