![Client-Side GraphQL in React](https://static.frontendmasters.com/assets/courses/2019-12-03-client-graphql-react/thumb.webp)
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.
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