GraphQL queries - getting the user data
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.