GraphQL queries - getting the user data
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:09] GraphQL queries, getting the user data. Let's make our first query. Inside of the SRC, create a new file, welcome window.tsx.
[00:10 - 00:17] This is where we'll define our welcome window component. In this component, we want to load the currently authenticated user's data and display it in a window.
[00:18 - 00:27] Define the query. Const get user info is a GQL, where we'll call the query get user info.
[00:28 - 00:33] And we want to get the viewer, name and bio. In particular from Apollo.
[00:34 - 00:43] If you go to GitHub documentation, you will see that this query returns an object with the viewer field that contains sub-fields with user data. We only need two of those fields, name and bio.
[00:44 - 00:56] Let's define a type for this query. Type user info is an object with a viewer that contains name, string and bio, string. Now let's define the component.
[00:57 - 01:09] Expert const welcome window is a functional component that fetches the data. We need the loading state and the data using the use query hook.
[01:10 - 01:25] Pass in the user info type as that type of the query and the get user info query. Now we return a fragment where if we are loading, then we return text loading and ellipsis.
[01:26 - 01:32] Otherwise, we return JSON, stringify data. Here we use the use query hook to perform the query.
[01:33 - 01:39] This hook will make request immediately after the component mounts. When we call use query, three variables are returned.
[01:40 - 01:45] The is loading state. It's a Boolean flag that shows if we are still waiting for a response from the server.
[01:46 - 01:53] Data is our data. You can provide a type argument to the use query hook to specify the type of the data you're expecting.
[01:54 - 01:58] And also you can get an error. We don't use it here, but you would get it if something would go wrong.
[01:59 - 02:04] This object will contain the information about the error. Then if we are still loading, then we show the loader.
[02:05 - 02:10] In our case, it's a simple string. And if the data is loaded, we show the JSON representation of this data.
[02:11 - 02:15] Go to app.tsx and render the welcome window component. Welcome window.
[02:16 - 02:17] Now launch the app. You're on start.
[02:18 - 02:25] If you are logging in for the first time, you will be redirected to authorization screen in your browser. There just click authorize button and then return to command line.
[02:26 - 02:35] Here you should see a JSON representation of an object containing your username and bio. If everything is okay, then we can start adding a proper layout.