Watch "Write a GraphQL Mutation using React Hooks with Urql" (community resource) on egghead.
The first thing we need to do is import {useMutation} from 'urql'
.
We will call the useMutation
hook in our component. This hook returns an array with the result in the first slot and a function to execute the mutation in the second.
const App = () => {
const [res, executeMutation] = useMutation()
}
Now we need to define a query that we are going to use. Here is the one I am going to use:
const addCourse = `
mutation addCourse($slug: String!, $title: String!){
insert_courses(objects: {slug: $slug, title: $title}) {
returning {
title
slug
}
}
}
This query takes a slug and a title as a string (they are both required). The Hasura api I am using defines are returning
object. So we will grab the title and slug off of the returned object.
Now we can pass this query to our useMutation
hook.
const [res, executeMutation] = useMutation(addCourse)
Lets wire up the wire up the execution method to a button. executeMutation
takes an object with keys slug
and title
. These are the variables we defined in our GraphQL query earlier. We are going to log our res
variable to see whats returned.
const App = () => {
const [res, executeMutation] = useMutation(addCourse)
console.log({ res })
return (
<button
onClick={() => executeMutation({ title: 'My Course', slug: 'my-course' })}
>
Create Course
</button>
)
}
{res: {fetching: true, stale: false, error: undefined, data: undefined, extensions: undefined}}
{res: {fetching: false, stale: false, data: {…}, error: undefined, extensions: undefined}}
You can see the result updates when the request starts and again when the query returns the data. This is what the data object looks like:
console.log(res.data)
{
insert_courses: {
returning: {
slug: 'my-course',
title: 'My Course'
}
}
}
Top comments (0)