Client-Side GraphQL in React

Fragments Solution

Scott Moss

Scott Moss

Superfilter AI
Client-Side GraphQL in React

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

>> 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.

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.

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.

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