如何将片段与阿波罗角一起使用

Question

我使用 Angular 13 和 apollo-Angular 3.0.0。 我有进行 GraphQL 查询的代码：

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;
}

GET_TODOS 和 GET_TODO_BY_ID 对象中都有重复的代码。
有没有办法减少重复的代码，以便我可以定义一次 Todo 和 Author 的结构，并重用该结构来制作 GET_TODOS 或GET_TODO_BY_ID 查询。

我知道 GraphQL 中的 Fragment，但我不知道如何用 Angular 编写 Fragment。有人可以帮助我吗？

Answer 1

要在查询 graphql 服务器时使用带有 apollo-angular 的片段，

请创建一个像这样的变量

POST_FIELDS = gql`
    fragment POST_FIELDS on Post {
      _id
      title
      content
      creator {
        _id
        name
        email
      }
      imageUrl
      updatedAt
    }
  `;

上述查询的解释如下 -

• POST_FIELDS - 要使用的片段名称
• Post - 在 graphql 服务器上定义的架构名称（而不是在前端）
• Post 的其余内部字段是 post 的架构

现在在 gql 查询中使用片段，如下所示

this._apolloClient.watchQuery<any>({
      query: gql`
        query FetchPosts($page: Int = 1) { // FetchPosts is the operation name
          posts(page: $page) { // posts is the resolver to execute on server
            posts { // Required response
              ...POST_FIELDS // Used the defined fragment
            }
            totalPosts // // Required response
          }
        }
        ${this.POST_FIELDS} // Injected the above defined fragment
      `,
      variables: {
        page: 1,
      },
      context: {
        headers: new HttpHeaders().set("Authorization", this.token), // Passed additional custom header along with the global headers
      },
    }).valueChanges.subscribe({
      next: (result: any) => {
        this.posts = result?.data?.posts.posts;
        this.loading = result.loading;
        this.error = result.error;
        console.log('Logging Fetch Posts Query----', this.posts, this.loading, this.error);
      }
    });

注意：在使用如上所述的确切代码时，请务必从 gql 模板文字查询中删除注释。

希望这对您或其他人有帮助。

快乐编码！谢谢。