'How can I use fragments with apollo-angular

I use Angular 13 and apollo-angular 3.0.0. I have the codes to make GraphQL query:

const GET_TODOS = gql`
  query GetTodos() {
    todos() {
      id
      title
      brief
      body
      tags
      created_at
      updated_at
      author {
        id
        nickname
        avatar
        created_at
        updated_at
      }
    }
  }`;

const GET_TODO_BY_ID = gql`
  query GetTodosById($id: String!) {
    todos(id: $id) {
      id
      title
      brief
      body
      tags
      created_at
      updated_at
      author {
        id
        nickname
        avatar
        created_at
        updated_at
      }
    }
  }`;


getTodos(): Observable<any> {
  return this.apollo.watchQuery({
    query: GET_TODOS,
    variables: {},
  }).valueChanges;
}

getTodoByID(id: string): Observable<any> {
  return this.apollo.watchQuery({
    query: GET_TODO_BY_ID,
    variables: { id },
  }).valueChanges;
}

There are duplicated codes in both GET_TODOS and GET_TODO_BY_ID object.
Is there a way to reduce the duplicated codes so that I can define the struct of Todo and Author once and reuse the struct to make GET_TODOS or GET_TODO_BY_ID query.

I know Fragment in GraphQL, but I don't know how can I write the Fragment in angular. Someone can help me?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source