Check out a free preview of the full Fullstack TypeScript (feat. GraphQL & Node.js) course

The "Data from the Database" Lesson is part of the full, Fullstack TypeScript (feat. GraphQL & Node.js) course featured in this preview video. Here's what you'd learn in this lesson:

Mike walks through how to make a call to the database to replace the fixture data array with new data from the database. This call will pull in the current user and follow suggestions.


Transcript from the "Data from the Database" Lesson

>> We're gonna get our database hooked up. We're gonna wire up. Instead of returning purely fixture data, which we are right now. Just remember in our resolver query resolver we're returning this fixture data for suggestions and this fixture data for the current user. Let's actually get this returning something from our database.

So, this should be pretty easy. We're going to replace the existing suggestions resolver with this, get all suggestions from our database. And because we've typed this really well and we have this context object, we'll be able to grab this little DB variable with ease. And we'll know this is working if we see more suggestions in the UI.

Well, let's use our dev tool first. That's a good sign, we see four things now instead of two in the UI. See four things here, so this is now data coming from our database. And then for our current user, we can do something similar. So what we're going to do here is grab all users.

We'll use destructuring assignment to get the first one in the array. So we'll consider the first user to be the currently logged in user. And if it's empty, there's no first user will throw otherwise we'll return. The reason we have to do that not only is it good to give us an actionable mode of failure here, right, with a good error message, but this is not a nullable field like current user if asked for has to return some value.

So if there's a possibility of this being null the both the type checking and Apollo's run time validation should yell at us about it. We can explore that here in a sec. So I've just replaced the existing resolver with the new one. Let's test it real quick. Okay, that this just changed here.

Let's get the creation date. Great, it's March 23rd. So it was yesterday. So this is data coming from our database. I don't think that the UI will change much here cuz the fixture data is in fact the same thing. But you can see this switch back, it's no longer John Doe.

So let's see what happens if we remove this. So now we're getting yelled at a little bit like DB user or undefined is not assignable to the type that was generated for this resolver. So this is where we're kind of being told. Hey, this is not supposed to be a nullable thing, like you're supposed to always return something here.

So where we are right now, is, we have type checking working across our tech stack now. If we wanted to maybe make this nullable, all we'd have to do is go to our schema.graphql. Remove this exclamation mark. It's gonna make our UI angry, by the way, cuz it expects current user to be there.

But let's go back to our server sub project, run our codegen again. And we might need to bounce the TypeScript server, the language server. I'm not sure why this is allowed here. What if I return null? Yeah, okay, it's willing to tolerate null not undefined, but if I put this requirement back and kojin again, it should reject to the null.

Yep, it already is. Null is not assignable to that type now, so you'd have to put this back and then add the guard to handle the possibility that it's not there. So we can see the guardrails are up where we're being protected from. There's one set of assumptions and one set of constraints that both our UI and our back end and our data persistence, like serialization and deserialization.

All of that is operating under the same set of assumptions that are defined in one file, which is a great place to be.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now