Check out a free preview of the full Client-Side GraphQL in React course

The "Fragments Solution" Lesson is part of the full, Client-Side GraphQL in React course featured in this preview video. Here's what you'd learn in this lesson:

Scott live codes the solution to the fragments exercise.

Preview
Close

Transcript from the "Fragments Solution" Lesson

[00:00:00]
>> Scott Moss: So let's head into our client JS. And the objective was to extend the pet type, so we can say extend,
>> Scott Moss: type Pet. And we're gonna add a vaccinated,
>> Scott Moss: Wait, it's vaccinated, two Cs, right? Yeah, vaccinated and we'll say that's a Boolean and we can say it's required.

[00:00:22]
Then what we'll do is we'll add a resolver for pet,
>> Scott Moss: Vaccinated, and we'll just always return true for now.
>> Scott Moss: So that's as simple as doing that, and then we head into the pets query, I already had the fragments on mine. But if you didn't have fragments, just to go over it is you just need to make a new graph QL tag using the fragment keyword, name the fragment on whatever type that you want.

[00:00:56]
Add the fields that you're interested in having this fragment encapsulate. And then you need to add those fragments outside of an operation on a query or a mutation, and then use the spread, which is dot dot dot with the name of the fragment, and you'll be able to use it.

[00:01:17]
So we got that. I'm just gonna add one more field here for the pet, which is vaccinated. And I need to say @client because it's from the client.
>> Scott Moss: Go back, looks like nothing is broken. Our pets are still good, nice and cute animals there, and we're good.

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