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.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To 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 \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

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. 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. 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. 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. 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. 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. For now, we'll have the user resolver simply return a string that references the field being queried. query.user. 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. [BLANK_AUDIO]