Reusing Fragments

If we try to import our new habit fields fragment into AddHabit.js and use it with the create habit mutation, the whole app blows up with an error: Cannot access 'HABIT_FIELDS' before initialization. What does this mean?

Well, we've created a circular reference here. The AddHabit.js wants the HABIT_FIELDS variable, which is created on the App component, but the App component creates the AddHabit component on render! Whoops!

This is an important lesson to remember: because of the way fragments work in Apollo, we can't import and use fragments in child components. We can either 1) define the fragment in a child component and use it in the parent or 2) define the fragment in a parent and use it in a sibling. We can't do the second option since we only have one page in this app, and I don't like the idea of randomly sticking a fragment in a child component and hoping I remember which one I chose in a year or two after the app has doubled in size.

Luckily, there's a third trick we can use. That's to create a helper file for our fragments. We're going to create src/helpers/fragments.js and move our habit fields fragment in there. Don't forget to import the gql tag at the top of the file.

Then, import it in both App.js and AddHabit.js:

import { HABIT_FIELDS } from "./helpers/fragments";

We've already added it to the HABITS_QUERY, so go ahead and do so with the create habit mutation:

// src/AddHabit.js
const CREATE_HABIT_MUTATION = gql`
  mutation CREATE_HABIT_MUTATION($input: NewHabitInput) {
    createHabit(input: $input) {
      ...HabitFields
    }
  }
  ${HABIT_FIELDS}
`;

Finally, we'll do the same thing in EditHabit.js. Add the import:

import { HABIT_FIELDS } from "./helpers/fragments";

And update the update habit mutation:

const UPDATE_HABIT_MUTATION = gql`
  mutation UPDATE_HABIT_MUTATION($input: UpdateHabitInput) {
    updateHabit(input: $input) {
      ...HabitFields
    }
  }
  ${HABIT_FIELDS}
`;

If you check out the app in the browser, everything should be working and you should see the fragment in the queries of the network calls. This is great, because now if the fields on the habit data type change, we only need to update one place (the fragments helper file).