Add GraphQL Query Args with urql's useQuery Hook

Instructor: [0:00] One of the benefits of using GraphQL is that we are able to only fetch the data that we are going to use on a particular page. In this case, we don't use the title, summary, and the ID of our stories, so there's no need to fetch the author. Hopping on the stories, we'll open a Moodle for the story details, but we're not actually displaying any data.

[0:21] Let's start by opening the types.ts and define which variables you want to pass in. In our case, when we open a story details Moodle, we want to pass in the ID, which is a string, and the title of the story, which is also a string. Now, in our home screen, we'll notice the navigation call now has an error because we're not passing the arguments.

[0:42] Let's pass an object with an ID being itemID and the title being item.title. For the title, we want to display that here instead of the story details Moodle. Let's go to the root stack navigator. In our story details Moodle screen, let's convert the options into an arrow function, returning an object.

[1:05] Let's destructure root from the options. For the title, let's do root.params. We'll get access to the params passed into the root. In this case, let's use the title. When we navigate to either of the screens, we'll see that the title of the story appears at the top of the Moodle.

[1:26] Opening the story details Moodle, let's import useRoot and the root prop from react navigation. Also, let's import the root stack param list from our types. In the story details Moodle, let's do const root = useRoot.

[1:44] We'll need to pass in the root prop with the root stack params list and the name of the screen we're currently in. In our case, the story details Moodle. Here, we can console log our root params.

[1:59] If we open our terminal, if I navigate to a screen, we'll see that we have the ID of the story and the title. When the user taps on the Moodle, we want to fetch the rest of the details for that story. Let's import useQuery from Urql and let's do const.

[2:17] We can destructure our array. We'll have a data, fetching, and error = useQuery. Now we can go back to Insomnia and copy our story by ID query. We can input GQL from Urql. Let's do const story by ID = GQL. In template strings, let's paste the query. In the useQuery hook, we want to pass in the query and also the variables. The variables will be an object.

[2:54] They will need to match the variables passed in to the query. In our case, we have one variable and it's called ID. We'll do ID is root params and ID. Obviously, we want to fetch all the story details here. Let's also add the author, summary, and text.

[3:14] It's good practice to also address the fetching and the error states. Let's go to our home screen and let's copy the fetching and the error states from here, and paste them into our story details Moodle component. We'll need to import activity indicator from React Native.

[3:32] Let's import scroll view from React Native. At the end of our component, let's return a scroll view. Inside it, let's do a text with data, story, author. Let's add two more texts for the summary and the text. Now we just need to add some styling.

[3:53] For the author, let's do by and author. Let's add a style. Style = styles.author. In our style sheet, let's do author and font style Italic, font size 16, color gray, and margin-bottom 20. For the scroll view, let's add a style of styles.scrollview. Let's just give it a padding of 20.

[4:22] For the summary, let's add a style of styles.summary. In style sheet, we'll do summary, font size 16, margin bottom 20, line height 25, and text-align justify. Finally, for the last text, let's do style = styles.text. In a style sheet, we'll do text, font size 16, line height 25, and text align justify.

[4:53] Now we have an app with a bottom tab navigator, with two tabs, rendering a list of stories. When you tap into a story, it will do another GraphQL request to fetch the story details.