Fragments

[00:00:00]
>> Scott Moss: So what I want to talk about is something called fragments. Fragments are basically kind of like what they sound like, they're little pieces of something. For instance, if we have owner here and we know we have to add it here, all of these fields are very similar.

[00:00:16]
We kinda just duplicated this stuff everywhere. So instead of duplicating everywhere, we can just add a fragment. So I'm gonna take all these fields away from here, take all these fields away from here. And now, what I'm gonna do is I'm gonna create what's called a fragment. So I can say const, and then I'll just say PETS_FIELDS = always use our graphql-tag.

[00:00:41]
>> Scott Moss: And I'm gonna say fragment, and we can call it PetsFields on Pet, like that. I gotta spell it right, fragment. There we go. So you use the fragment keyword, you give it a name. Use the on keyword to describe on what type are you trying to declare fragments for.

[00:01:08]
So AllPets query and the add pet mutation both returned a pet type, so I'm creating a fragment on the pet type. And then here, I can add whatever fields I want. So in this case, I want to do this. I wanna add a fragment that has an id, a name, type, img, owner, id, age, and that's a client.

[00:01:29]
Even a client name will work here.
>> Scott Moss: And then from there to add my,
>> Scott Moss: To add in my fragments, because we're inside of a ES6 string like this, all I have to do is just use a template literal or interpolation here, and just pass in the variable like that, PETS_FIELDS

[00:02:02]
>> Scott Moss: So now, you could move this to another file, do something else with it. And now you know all your queries and mutations are gonna have the same fields. So fragments are really handy. You might read, in some documentation, other ways to use fragments. I think a big thing the community does in React is they'll attach the fragments to the components that use the query.

[00:02:22]
So they'll come down here and they'll do something like the pets component Pets.fragments =, they'll make an object and they'll give the fragment a name like petsFields. And then they'll add that fragment that we created up here to do that. And that way they can share the fragments based around components.

[00:02:44]
So that's something if you started getting into organizing your React app. If that's how you do your app, then yeah, that's a thing that the community does, they'll add their fragments here like gql and do their fragments like that. But we're just in one file, so there's no need to do all that.

[00:03:00]
I'm just stuck in my app right now. This is not my app, this is. Okay, so there's two things you have to do. You can't just add them in like this. In my app, I add them in like this because we're just using strings, so I got confused just now.

[00:03:15]
But we're using a graphql template tag here, so we have to account for that. The way you would do that is, first is you have to add the fragment. So you add the fragment at the bottom using the same thing that we just did, and then you can use the ..., syntax like this, and then you can use the fragment name, so PetsFields, so something like that.

[00:03:54]
>> Scott Moss: So this is just spreading over all the fields you want on the fragment. This is adding the fragment to the actual operation.
>> Scott Moss: So now, if we refresh our app, everything should be working just fine.
>> Scott Moss: There's no simple way to add those fragments here to the optimistic response.

[00:04:22]
Cuz we wrote those graphics in graphql, so you can't just easily get them here. But there's nothing stopping you from creating a mechanism from grabbing those fragments and using them here yourself. But you still have to come up with a value, so it's probably just better to be declarative about in the first place.

[00:04:42]
>> Speaker 2: So when I attempt to use the optimisticResponse I get an invariant violation, no fragment named pets fields, do I now have to add that pets fields?
>> Scott Moss: Yeah, so yeah, now-
>> Speaker 2: Is it gonna add in the fragment to the optimisticResponse?
>> Scott Moss: Right, so now you have to add the fragment to the response, which is, let me see, how do we add the fragment to this?

[00:05:05]
>> Scott Moss: I don't remember how to add the fragment to that-
>> Speaker 2: Something like a typename fragment.
>> Scott Moss: There's a specific typename, yeah. You gotta get the specific typename and add it there. But yeah, well, optimisticResponse has to follow exactly what the queried mutation has to the tee, even with that.

[00:05:19]
So, yeah, you gotta add that.