GraphQL mutations. Creating repositories

[00:00 - 00:04] GraphQL mutation creating repositories. So far we've only been fetching data.

[00:05 - 00:16] It's time to write our first mutation to create new repositories. Inside of the SRC repositories, create a new file, new repository, TSX.

[00:17 - 00:23] Here we define our mutation. const create repository equals GQL.

[00:24 - 00:31] Inside of it we'll define our create new repository mutation. mutation create new repository.

[00:32 - 00:36] For this mutation we'll need a bunch of arguments. We'll need a name of the repository.

[00:37 - 00:40] This field is mandatory so we add an exclamation mark. We'll need description.

[00:41 - 00:51] For repositories it is also mandatory and we'll need the visibility. If it's a private or public repository, visibility of type repository visibility.

[00:52 - 00:59] Inside of this mutation we will call create repository. We'll pass in the input argument with field's name.

[01:00 - 01:07] That comes from the name argument of our mutation. Description from description and visibility from visibility.

[01:08 - 01:17] In return we want to get an object containing field repository. And from that we want name URL and ID.

[01:18 - 01:25] Now we're on the code generator to get the types for our query or for our mutation in this case. Let's import the generated types.

[01:26 - 01:34] And now below the query let's define our new repository component. Expert const new repository equals a function.

[01:35 - 01:41] Here let's define an on submit function first. const on submit equals async.

[01:42 - 01:51] Here we'll receive the form values, values of type form values. And we'll get the name and description from the values text box.

[01:52 - 01:56] Let's postpone the on submit function. We'll define it a bit later.

[01:57 - 02:05] For now let's define the component layout. Return will render a panel with text saying new repository.

[02:06 - 02:14] Then we render a form. Our forms have render props that we pass to them that receive that trigger sub- meet method.

[02:15 - 02:23] Inside of the form body we render a fragment with two fields, name and description. We will get them in the on submit function.

[02:24 - 02:28] Also add a hint regarding using the tab button. We don't need to do anything for it to work.

[02:29 - 02:37] It's just a reminder to the user that they can use a tab. And also add a button that will handle on press and trigger on submit.

[02:38 - 02:46] We also need to pass the on submit handler to our form. Alright, make sure to provide the styling parameters to the panel and text.

[02:47 - 02:54] It should have top 25% left center and height 12 lines. That text should have center alignment.

[02:55 - 03:08] Now to call this mutation inside of the on submit where we want to send the data to create the new repository, we need to get the create repository method. const create repository equals.

[03:09 - 03:11] And here we'll use the use mutation. Use mutation.

[03:12 - 03:21] Use mutation is a generic hook. We'll need to pass the create new repository type and the create new repository variables type.

[03:22 - 03:28] Pass in the create repository as an argument. Here we've used the generated types provided by Apollo.

[03:29 - 03:40] Now we have the create repository function that we will call inside of the on submit function. After we got the name and the description, let's try to get the result const result equals await.

[03:41 - 03:47] Create repository. We need to pass in the variables defined in the create new repository variables .

[03:48 - 04:01] And they come from the name description visibility defined on our mutation. So go back to the on submit and we pass variables as an object containing name, description and visibility.

[04:02 - 04:14] By default, let's use repository visibility public. At this point, I believe you have enough skill if you want to enhance this component and provide an option to select visibility manually.

[04:15 - 04:24] Let's add a catch block and here we will do nothing. Now after we will get the result, we will be able to store the repository that we've just created in the state.

[04:25 - 04:40] Let's create the state using react hook const repository set repository equals use state create new. Repository create repository repository.

[04:41 - 04:48] Such a lengthy type is automatically generated from our query. It can be convenient to define an alias for it.

[04:49 - 05:03] Make it optional by providing null as an alternative. Okay, now after we got the result, we can call set repository pass in result data create repository repository.

[05:04 - 05:16] We also need to handle errors. Let's define an error state const error set error equals use state of type error or null.

[05:17 - 05:27] And now if we get an error, we store it in the state set error e. Okay, now let's handle the success and the error states in the component layout .

[05:28 - 05:44] If we created a repository if repository we return new entity success with title new repository created. Here you can actually write the title of the repository or the name of the repository.

[05:45 - 06:15] We specify the URL repository URL and on close we are going to clean up the repository state and a function that calls set repository null. Let's format the document and continue to handle the error state. If error then we return new repository error pass in the error as a prop error equals error and on close should reset the error state set error null.

[06:16 - 06:43] Oh, this component is actually called new entity error. Okay, our component is completed open repositories and now instead of the new repository mock that we had here import the real one import new repository from new repository. Run the application go to repositories try to create one and their name description and you should be able to create a new repository.