React, Graphql - How to use useMutation hook - reactjs

Question

I'm trying t0 create a simple demo using React, Graphql, Typescipt and useMutation hook.
I have a mongoDB set up and a useQury hook set up that all works and I can output the return from useQuery.
I'm also using apollo:gernerate to generate types
The problem I have is getting the useMutation to work.
App.tsx
import React, { useState } from 'react';
import './App.css';
import { RecipeData } from '../generated/RecipeData';
import { GET_ALL_RECIPES, ADD_RECIPE } from '../queries';
import { useQuery, useMutation } from 'react-apollo-hooks';
const App: React.FC = () => {
const [name, setName] = useState<string>('')
const [description, setDes] = useState<string>('')
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setName(e.target.value)
}
const handleDesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setDes(e.target.value)
}
const handleClick = (e: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
const [createRecipe] = useMutation(
ADD_RECIPE,{
onCompleted(data) {
confirm(data);
}
}
);
}
const { data, loading } = useQuery<RecipeData | null>(GET_ALL_RECIPES, {
suspend: false
})
if (loading || !data) return <div>Loading</div>
return (
<div className="App">
<h1>Graphql</h1>
<ul>
{
data.recipe !== null && data.recipe.map((recipe, i) => (
<li key={i}>{recipe.name}</li>
))
}
</ul>
<form>
<div>
<label>Name</label>
<input
type="text"
value={name}
onChange={handleNameChange}
/>
</div>
<div>
<label>Description</label>
<input
type="text"
value={description}
onChange={handleDesChange}
/>
</div>
<button onClick={handleClick}>Add Recipe</button>
</form>
</div>
);
}
export default App;
queries/index.tsx
import { gql } from 'apollo-boost';
export const GET_ALL_RECIPES = gql`
query RecipeData{
recipe{
_id
name
description
}
}
`
export const ADD_RECIPE = gql`
mutation AddRecipe($type: String){
addRecipe(type: $type){
name
description
}
}
`
generated/AddRecipe.ts
export interface AddRecipe_addRecipe {
__typename: "Recipe";
name: string | null;
description: string | null;
}
export interface AddRecipe {
addRecipe: AddRecipe_addRecipe | null;
}
export interface AddRecipeVariables {
type?: string | null;
}

Answer 1

You are using useMutation hook in a wrong way.
Your current code:
const handleClick = (e: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
const [createRecipe] = useMutation(ADD_RECIPE, {
onCompleted(data) {
confirm(data);
}
});
};
Now extract useMutation hook call outside the handleClick function and call the createRecipe that is the actual function to call when you click in the correct way:
const [createRecipe] = useMutation(ADD_RECIPE, {
onCompleted(data) {
confirm(data);
}
});
const handleClick = (e: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
createRecipe({ variables: { name, description }})
};
You have to use react hooks at the top level of your components, don't put them inside functions, loops or conditional statements :)
Documentation here: https://www.apollographql.com/docs/react/data/mutations/