Apollo GraphQL Hooks - Creating Mutations

Instructor: [00:00] In this video, we'll be looking at how to set up the Apollo client, use the useQuery hook, and then use the useMutation hook to send mutations to a GraphQL API and trigger our refetchQuery.

[00:12] If you've already seen the video on how to set up the Apollo client and use the useQuery hook, you can fast forward to the 5 minute and 45 second mark.

[00:21] We'll start off by creating a new React application called apollohooksapp.

[00:41] Next, we'll install the dependencies. We need to install apollo-client, apollo-cache-inmemory, apollo-link-context, apollo-link-http, graphql, graphql-tag, and the new @apollo/react-hooks@beta.

[01:04] If you're watching this video in the Apollo, React Hooks library is out of beta. You can just install @apollo/react-hooks.

[01:24] After everything has been installed, we'll open the application in our text editor. The first thing we'll do is open index.js and import our dependencies. Here, we'll be importing ApolloClient, InMemoryCache, setContext, createHttpLink, and ApolloProvider.

[02:26] Next, we'll create a new Http link by calling createHttpLink and passing in the URI of our GraphQL API.

[02:40] If you need to send headers to your GraphQL endpoint, create an authLink and set your header properties. Next, we'll create our client variable by calling new ApolloClient and passing in the link and the cache property as new InMemoryCache.

[03:09] If you do not have an authLink, you can just pass the HttpLink as the link property. Finally, we'll create an Apollo app component by passing in the client as the client into ApolloProvider.

[03:44] React.DOM.render will replace the app component with our new Apollo app component. Next, we'll open app.js and import gql from GraphQL tag and use query from addApollo/react-hooks.

[04:09] Next, we'll create a variable called query to place our GraphQL query. In the app function, we'll use the useQuery hook passing in the query to return the data and the loading state from the query.

[04:43] We'll check to see if the data is loading. If it is, we'll return a message that lets the user know that the data is loading. Finally, we'll map over the items array returned from the query, returning the item name and item description.

[05:28] Next, we'll run npm start to launch our app. When the app loads, we should see our items rendered to the screen. When we refresh, we should see a loading message. Now that we have queries working, we'll go back into app.js and import the useState hook from React, and the useMutation hook from apollo/react-hooks.

[06:02] Next, we'll define our GraphQL mutation in the variable called mutation. We'll be creating a form. We'll need a way to hold the values from the form input.

[07:00] To do so, we'll create two new pieces of state, one called name and one called description. Next, we'll set up the useMutation hook. The return value from the useMutation hook that will be using is going to be a function called createTaco and an error to check to see if there are any errors in our mutation.

[07:31] For the first argument to useMutation, we'll pass in our mutation definition. The second argument to useMutation will be the variables that we're passing into the mutation. The third argument to useMutation will be the refetchQueries that we'd like call after the mutation has been successful.

[08:02] Next, we'll check to see if there're any errors. If there are, we'll log them out. Finally, we'll create our form with two inputs and a button that when clicked will call createTaco.

[09:09] Next, we'll launch the app by running npm start. If we try to send the mutation with an empty input value, we'll notice that the GraphQL error has been logged out to the console.