Fragments

Fragments are used to avoid redudant and repetitive codes.

Fragments for the entire codebase reside in the file app/shared/fragments.ts

Here is the example for writing fragments.

const USER_PROFILE_PIC_FRAGMENT = gql`
  fragment UserProfilePicFragment on user {
    id
    profile_pic
    username
  }
`;

In the code above, UserProfilePicFragment is the selector for graphql-tag that we'll be using in queries/mutations/subscriptions and the variable USER_PROFILE_PIC_FRAGMENT is used to access the variable from Angular.

The following code shows how the fragments are used in a query.

import {USER_PROFILE_PIC_FRAGMENT} from ./fragmnents;
const USER_INFO = gql`
	query {
		user {
			...UserProfilePicFragment
		}
	}
	${USER_PROFILE_PIC_FRAGMENT}
`;