Building a GraphQL Query to Fetch User Account Data Fields
In this module, we begin building the server and client implementation that will help allow us to retrieve and display information for users in our application. We'll begin by brainstorming the GraphQL fields we'll need to query 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 TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two with a single-time purchase.
[00:00 - 00:12] In order to display information about our users in our client application, we'll need to have our client be able to query and resolve user data from our server. So let's brainstorm exactly what GraphQL fields we'll need to accomplish this.
[00:13 - 00:28] For our app, we'll only need a single user query, since we only want the client to query a single user at a time. This is pretty straightforward, since we'll only need to find a user document from the user's collection and return that particular document.
[00:29 - 00:40] The only complication with this field is that we'll look to only return sensitive user data if the user is requesting their own information. For example, we won't want to query the income of a no other user.
[00:41 - 00:53] We'll implement this authorization feature in the next lesson. In our GraphQL type definitions, we'll create a new user field that is to be a defined string type.
[00:54 - 01:09] Next, we can set up the resolver for this user field we've just created. Since user isn't directly related to the concept of a viewer, we'll create a new resolver's map to contain the resolver function within the user module.
[01:10 - 01:23] We'll create a new folder called user in our resolver's folder that is to have an index file. In the index file, we'll export a user resolver's map and assign its type with the iResolver's interface.
[01:24 - 01:51] For now, we'll have the user resolver simply return a string that references the field being queried. query.user.
[01:52 - 02:19] Finally, to connect our new resolver's map, we'll import the user resolver's map in the resolver's index file and place it in the merge function. If we now go to GraphQL Playground at localhost9000/api and run the user query, we'll see the query.user output.