Check out a free preview of the full Introduction to GraphQL course:
The "Interfaces Solution" Lesson is part of the full, Introduction to GraphQL course featured in this preview video. Here's what you'd learn in this lesson:

Scott live codes the solution to the exercise.

Get Unlimited Access Now

Transcript from the "Interfaces Solution" Lesson

[00:00:00]
>> Scott Moss: Hopefully everybody had enough time to make the conversion over from a product type to a product interface. And then create the three new types that implement that interface. And then finally, build out that resolve type function that resolves the types, so I'm just going to hop right in and start working on that.

[00:00:18] So let's head over to our Product.GraphQL. And the first thing we want to do is change the name of Product from type to actually just be an interface. So that's the first thing I'm going to do, just going to make that an interface. And then I'm going to go ahead and create some new types.

[00:00:33] So I'm going to make a type for GamingPC, like this, and it's going to implement-
>> Scott Moss: A Product, which is an interface now, and it's going to have all the same things minus some things. So GamingPC has all this stuff, except a GamingPC doesn't have a range, because it's not a drone, it doesn't have a BikeType.

[00:01:00] But a GamingPC does have liquidCooled, and if it is a GamingPC, it must be root, not null, it must be required, so I'm going to put that.
>> Scott Moss: And so if you see this, this actually won't work. Because now the product has fills that the GamingPC doesn't and you have to implement all of them.

[00:01:18] So what that means is, this BikeType, this range and this liquidCooled is no longer going to live on the interface. And so those are going to be the three different fields, right? So we can just comment those out for now and then we'll add them down to the other types.

[00:01:30] So now this will satisfy the implementation of product because it has a name, name, price, price, image, image. Type is type, createdBy is createdBy, and description is description, and then its only unique thing, which is liquidCooled. So that will satisfy that, so if we run some test here, let's see, test-interfaces.

[00:02:05]
>> Scott Moss: See what happens.
>> Scott Moss: Okay, so I've got to finish doing all of this before this is going to work, so we'll just keep moving on it. And so the GamingPC implements the product, and then we will say type, what's the other one?
>> Student: Drone.
>> Scott Moss: Drone, there we go, Drone implements the Product as well.

[00:02:34]
>> Scott Moss: Boom, and then from there, very much the same thing, we'll go ahead and copy this, there we go, copy that. And we'll say that Drone also has a range which is a type of String.
>> Scott Moss: Which is required, okay? And then we'll say type.
>> Student: Bike.
>> Scott Moss: All right, there we go, I'm drawing a blank, implements, Product, it's got those fields.

[00:03:08] And then it has a bikeType, which is an enom of BikeType, and is required. So we've got those, so the next thing we do is, let's look at these tests here, get rid of this.
>> Scott Moss: spec for lesson-4, there we go, so, it needed an interface called Product, cool.

[00:03:36] And then we need a GamingPC that implements the Product. And need that to be a Boolean for liquidCooled, a BikeType that implements the Product. And it needs a field that has bikeType, that's required. And then we need a Drone that implements Product, and it needs to have a field called range that is a String.

[00:03:58] So go ahead and save all that and just run the test, see what we get, did anybody get all these to pass? Nice, cool, looks like mine are still failing, so let's see why, cannot read property types of undefined. Let's see, GraphQL Unexpected Name, GamingPC, Gaming, I must have had a typo, so it looks like it needs to be called-

[00:04:39]
>> Scott Moss: Gaming,, I got this thing up top, at the top of my file that I left in here that's breaking everything. There we go, let's get rid of that, run the test again.
>> Scott Moss: Cool, so all those pass, as far as the schema stuff goes, the only test that's still failing is the resolver that we have to create.

[00:05:00] So resolves the product interface. So in order to do that, we need to go create a resolver that resolves the type for the interface product. So it needs to resolve to either a GamingPC, a Drone or a Bike, so we'll do just that and we'll head over to the resolver.

[00:05:18] We'll scroll down to where we're going to write a resolver for product interface, and resolve the type here. We're going to get a product as the first argument, because when someone's querying for a product, that product is resolved. And then it's passed onto this resolver, so we know that that's a product.

[00:05:37] And if it's a product, if we look at the product.model, there's a type property on there that is an enum of gaming pc, bike, or drone. So we can look at that type property and it's required, so we know it's there. So, we can look at that property to see, depending on this property, we know what GraphQL type to return.

[00:05:55] So, if it's a Gaming_PC, we'll return GamingPC, if it's a bike, we'll return a Bike, if it's a drone, we'll return a Drone. So let's do that, so get rid of this, go down to the resolvers and we'll just say return. And we've got this match up here that I said that I have for you all, the productsTypeMatcher that does all that for you.

[00:06:19] eSo, productsTypeMatcher, so we'll return productsTypeMatcher, and we'll take in the-
>> Scott Moss: product.type, and that's it.
>> Scott Moss: So what this is doing is given a product.type, which is going to be one of these. Go ahead and return the matching type, GamingPC or Drone or Bike.
>> Scott Moss: All right, so given one of the enums return the type name, and that's it so if we run the test.

[00:07:10]
>> Scott Moss: And you can see, that satisfies the test and it passes.