AWS Amplify GraphQL Operations with TypeScript and Hooks - Part 3 [Mutations]
Let's take a quick look at mutations. This will be a short post, as Amplify makes mutations relatively painless, and the format of GraphQL mutations that we'll look at closely resemble the queries that we've already looked at (take a look at the previous posts in this series for more on that).
Mutations
To set up for mutations, we need to look at part of the query we did in the previous section.
12345678910111213141516const fetchQuery = async (query: string, variables?: VariablesType) => {try {setLoading(true)const { data } = (await API.graphql(graphqlOperation(query, variables),)) as {data: ResultType}setData(data)} catch (error) {console.log(error)setError(error)} finally {setLoading(false)}}
All GraphQL API calls made with Amplify using the graphqlOperation
function. We can reuse this, so let's make another function to handle the returning of data.
123456789101112export const gqlOp = async <ResultType extends {},VariablesType extends {} = {}>(query: string,variables?: VariablesType,) => {const { data } = (await API.graphql(graphqlOperation(query, variables))) as {data: ResultType}return data}
Now we can use this little function in place of the fetch call.
123456789101112const fetchQuery = async (query: string, variables?: VariablesType) => {try {setLoading(true)const data = await gqlOp<ResultType, VariablesType>(query, variables)setData(data)} catch (error) {console.log(error)setError(error)} finally {setLoading(false)}}
Now that's done, let's create a function for mutations.
1234567export const mutation = async <ResultType extends {},VariablesType extends {} = {}>(query: string,variables?: VariablesType,) => gqlOp<ResultType, VariablesType>(query, variables)
Alright, that's it. Thanks for reading!
Stay tuned for the next one where we tackle subscriptions.