Add urql to a React Native Project and Fetch Data With the useQuery Hook

Instruct: [0:00] Let's start with a plain React Native project. This project was initialized using the React Native TypeScript template, and it already has Prettier and ESLint installed. In the project, we have an index.js, which registers the app, and a source directory with one App.tsx, which just prints out "Hello, world!"

[0:20] Urql is a lightweight GraphQL client for React and React Native. Let's head over to the Urql Documentation page, and under Basics > React and Preact, we can find the installation instructions. Let's copy the installation command, and let's paste it into the terminal.

[0:36] Let's start by importing { createClient } from 'urql'. Now, let's create a const client, and this will be createClient(). We'll need to pass in a configuration object with a URL, which will be our localhost API, so http://localhost:3000/ and graphql.

[0:55] Next, we want to import provider from Urql. I always alias this as Urql provider. Let's wrap the whole app with the Urql provider.

[1:03] Finally, we'll need to pass the client in here. We'll do value = client. Now everything that's inside the Urql provider will be able to use the Urql query and mutation hooks. In your source directory, let's create a new file and call it stories.tsx.

[1:21] Let's import star as react from React, and import view and text from React Native. In our app.tsx, let's copy this view with the container. Let's do X world const stories and this returns an error function with what we copied from app.tsx.

[1:39] Let's also copy the styles and import style sheet. In our app.tsx, let's import stories and render it inside the Urql provider. We can delete this unused code. Let's head over to Insomnia to our all stories GraphQL query. Let's copy this query.

[1:59] In our storage component, let's import GQL from Urql. Let's do const stories query. Let's do GQL. In template strings, we'll pass the query. Next, let's import useQuery from Urql. In our stories component, let's do const result = useQuery.

[2:22] This takes a configuration object. We'll need to pass in query, which will be our stories query. This gets executed as soon as this component mounts. If we console.log the result, now when we reload our app, now the first one is an object with data error and the fetching state, and the second is a refresh function.

[2:45] You'll notice that this gets logged out twice. When the component initially loads, this request gets fired off, so the fetching is true. Once the data has been fetched, we get another log. The component re-renders and we get our stories, and fetching becomes false.

[3:01] A common thing to do is to destructure this result. We know that we get an array with data, error, and fetching. We can do, if fetching, then return the container. Let's use the same style as the whole container, and let's pass in the ActivityIndicator with color, gray. ActivityIndicator is imported from React Native.

[3:26] Next, if the API errors, we will do, if error, and let's return the same container, but let's pass in a text, and, "Something went wrong." Let's also pass in the error.message.

[3:41] Finally, if we're not currently fetching and if there are no errors, we want to actually render out our data. Let's import a FlatList from React Native. From here, we want to return a FlatList, which will have a data. Data would be data.stories from the query.

[3:58] Then, for that key extractor, we want to map item to item.id. For render item, we want to take the item and let's return some text, and let's just print out the item.title. We get a list of the story titles from our GraphQL API.

[4:15] Let's add some styles to the FlatList. We'll do, style Styles.FlatList. Here, let's do padding horizontal 20. Temporarily, let's add padding-top -- 100, just to be below the notch. Let's wrap this text in a view, and we'll want to add another text underneath for this summary. Let's give the title a, style = Styles.title, and the summary, style = Styles.summary.

[4:45] In the Styles, let's do title font-size -- 24, font-weight -- 400, text-transform -- uppercase, letter-spacing -- 2, and margin-bottom -- 10. For the summary style, let's do font-size -- 18, and color -- gray.

[5:00] Finally, to add some spacing, let's add in ItemSeparatorComponent. This will be just a view with a style. We'll do, style = Styles.separator. In the Styles, let's do separator with a height of 1, background-color -- black, and a margin vertical of 40. This separator component will be rendered exactly between each of the items.

[5:27] You'll notice that the bottom of the screen is cut off. That's actually because of this padding.

[5:33] Instead, let's do a content container style, styles.flat list container. In our style sheet, let's move this padding top into the flat list container style. Now you can scroll all the way to the end. Let's also add a padding bottom of 20.

[5:51] We've used the useQuery hook from Urql to fetch all stories and render them in a flat list. When we reload our app, we'll see the loading indicator followed by the stories loading.