In need of assistance with shaping GraphQL output?

Question

In need of assistance with shaping GraphQL output?

Here is an example of a returned data object:

{
  data: {
    posts: {
      edges: [
        {
          post: {
            id: "1",
            title: "Foo"
          }
        },
        {
          post: {
            id: "2",
            title: "Bar"
          }
        }
      ]
    }
  }
}

The query used to obtain this data is as follows:

    query MyQuery {
      posts {
        edges {
          post: node {
            id
            title
          }
        }
      }
    }

While this structure works, it requires creating nested interfaces. Is there a way to simplify the results or transform them using JavaScript map() instead?

Ideally, I would prefer the response to be formatted like this:

{
  data: {
    posts: [
      {
        id: "1",
        title: "Foo"
      },
      {
        id: "2",
        title: "Bar"
      }
    ]
  }
}

Note: Any solution provided should be implemented on the client side since updating the server-side GraphQL schema is not an option.

Thank you!

EDIT

Below is my Angular/TypeScript code that handles the GraphQL requests and responses...

post.service.ts

import { Injectable } from '@angular/core';
...

model/post.ts

interface CategoryNode {
    ...
}

export interface Post {
    ...
}

As shown above, too many nested interfaces are required for the current implementation.

Actual sample response (used for unit testing)

      
{
  data: {
    posts: {
      edges : [
        {
          post: {
            id: "cG9zdDoxMjc=",
            title: "Lorem Ipsum",
            date: "2022-01-06T22:00:53",
            uri: "\/2022\/01\/06\/lorem-ipsum\/",
            categories: {
              edges: [
                {
                  category: {
                    id: "dGVybToy",
                    name: "General",
                    uri: "\/category\/general\/"
                  }
                }
              ]
            }
          },
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        },
        {
          post: {
            id: "cG9zdDoxMjc=",
            title: "Lorem Ipsum",
            date: "2022-01-06T22:00:53",
            uri: "\/2022\/01\/06\/lorem-ipsum\/",
            categories: {
              edges: [
                {
                  category: {
                    id: "dGVybToy",
                    name: "General",
                    uri: "\/category\/general\/"
                  }
                },
                {
                  category: {
                    id: "dGVybToy",
                    name: "General",
                    uri: "\/category\/general\/"
                  }
                }
              ]
            }
          },
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        },
      ],
      pageInfo: {
        startCursor: "YXJyYXljb25uZWN0aW9uOjEyNw==",
        hasPreviousPage: false,
        hasNextPage: false,
        endCursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
      }       
    }
  }
};

javascript angular typescript graphql apollo

Answer 1

Answer №1

It's a challenge to provide advice on modifying your query to achieve the desired shape without being able to introspect the GQL schema. However, you can transform the response value into the desired shape by following this approach:

TS Playground

interface PostNode {
  id: string;
  title: string;
}

interface PostEdge { post: PostNode; }

type GQLResponse<T> = { data: T; };

type PostsResponse = GQLResponse<{
  posts: {
    edges: PostEdge[];
  };
}>;

type TransformedPostsResponse = {
  data: {
    posts: PostNode[];
  };
};

function transformPostsResponse (res: PostsResponse): TransformedPostsResponse {
  const result: TransformedPostsResponse = {data: {posts: []}};
  for (const edge of res.data.posts.edges) result.data.posts.push(edge.post);
  return result;
}

const postsResponse: PostsResponse = {
  data: {
    posts: {
      edges: [
        {
          post: {
            id: "1",
            title: "Foo"
          }
        },
        {
          post: {
            id: "2",
            title: "Bar"
          }
        }
      ]
    }
  }
};

const result = transformPostsResponse(postsResponse);
console.log(result);

Demo (compiled JS from the TS Playground):

"use strict";
function transformPostsResponse(res) {
    const result = { data: { posts: [] } };
    for (const edge of res.data.posts.edges)
        result.data.posts.push(edge.post);
    return result;
}
const postsResponse = {
    data: {
        posts: {
            edges: [
                {
                    post: {
                        id: "1",
                        title: "Foo"
                    }
                },
                {
                    post: {
                        id: "2",
                        title: "Bar"
                    }
                }
            ]
        }
    }
};
const result = transformPostsResponse(postsResponse);
console.log(result);

Answer 2

It's a challenge to provide advice on modifying your query to achieve the desired shape without being able to introspect the GQL schema. However, you can transform the response value into the desired shape by following this approach:

TS Playground

interface PostNode {
  id: string;
  title: string;
}

interface PostEdge { post: PostNode; }

type GQLResponse<T> = { data: T; };

type PostsResponse = GQLResponse<{
  posts: {
    edges: PostEdge[];
  };
}>;

type TransformedPostsResponse = {
  data: {
    posts: PostNode[];
  };
};

function transformPostsResponse (res: PostsResponse): TransformedPostsResponse {
  const result: TransformedPostsResponse = {data: {posts: []}};
  for (const edge of res.data.posts.edges) result.data.posts.push(edge.post);
  return result;
}

const postsResponse: PostsResponse = {
  data: {
    posts: {
      edges: [
        {
          post: {
            id: "1",
            title: "Foo"
          }
        },
        {
          post: {
            id: "2",
            title: "Bar"
          }
        }
      ]
    }
  }
};

const result = transformPostsResponse(postsResponse);
console.log(result);

Demo (compiled JS from the TS Playground):

"use strict";
function transformPostsResponse(res) {
    const result = { data: { posts: [] } };
    for (const edge of res.data.posts.edges)
        result.data.posts.push(edge.post);
    return result;
}
const postsResponse = {
    data: {
        posts: {
            edges: [
                {
                    post: {
                        id: "1",
                        title: "Foo"
                    }
                },
                {
                    post: {
                        id: "2",
                        title: "Bar"
                    }
                }
            ]
        }
    }
};
const result = transformPostsResponse(postsResponse);
console.log(result);

Answer 3

Answer №2

I utilized nested map() functions to transform the GraphQL response into a more structured object.

Here is my final code for reference in case anyone encounters a similar question or issue.

NOTE: The code below uses "articles" instead of "posts," but applies the same principles.

models/article-gql.ts

interface GqlCategoryNode {
    category: {
        id: string;
        name: string;
        uri: string;
    };
}

interface GqlArticleNode {
    article: {
        id: string;
        title: string;
        date: string;
        uri: string;
        categories: {
            edges: GqlCategoryNode[]
        };
    };
    cursor: string;
}

export interface GqlArticleResponse {
    edges: GqlArticleNode[]
    pageInfo: {
        startCursor: string
        hasPreviousPage: boolean
        hasNextPage: boolean
        endCursor: string
    }
}

models/article.ts

interface Category {
    id: string;
    name: string;
    uri: string;
}

export interface Article {
    id: string;
    title: string;
    date: string;
    uri: string;
    categories: Category[];
    cursor: string;
}

export interface PageInfo {
    startCursor: string;
    hasPreviousPage: boolean;
    hasNextPage: boolean;
    endCursor: string;
}

article.service.ts

import { Injectable } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { map, Observable } from 'rxjs';
import { GraphQLResponse } from 'src/app/core/types/graphQLResponse';
import { Article, PageInfo } from '../models/article';
import { GqlArticleResponse } from '../models/article-gql';

export const getArticlesQuery = gql`
  query getArticlesQuery {
    articles: posts {
      edges {
        article: node {
          id
          title
          date
          uri
          categories {
            edges {
              category: node {
                id
                name
                uri
              }
            }
          }
        }
        cursor
      }
      pageInfo {
        startCursor
        hasPreviousPage
        hasNextPage
        endCursor
      }
    }
  }
`;

@Injectable({
  providedIn: 'root'
})
export class ArticleService {

  constructor(private apollo: Apollo) { }

  public getArticles(): Observable<[PageInfo, Article[]]> {
    return this.apollo.query<GraphQLResponse<'articles', GqlArticleResponse>>({
      query: getArticlesQuery
    }).pipe(map(resp => {
      return [
        resp.data.articles.pageInfo as PageInfo,
        resp.data.articles.edges.map((articleNode) => {
        return {
          id: articleNode.article.id,
          title: articleNode.article.title,
          date: articleNode.article.date,
          uri: articleNode.article.uri,
          cursor: articleNode.cursor,
          categories: articleNode.article.categories.edges.map((categoryNode) => {
            return {
              id: categoryNode.category.id,
              name: categoryNode.category.name,
              uri: categoryNode.category.uri
            }
          })
        }
      }]
    })) as Observable<[PageInfo, Article[]]>;
  }

}

article.service.spec.ts

In this section, I showcase how I transformed the server response within the service and verified the transformed response through testing.

import { TestBed } from '@angular/core/testing';
import { Apollo } from 'apollo-angular';
import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
import { Article, PageInfo } from '../models/article';
import { GqlArticleResponse } from '../models/article-gql';
import { ArticleService, getArticlesQuery } from './article.service';


describe('ArticleService', () => {
  let service: ArticleService;
  let controller: ApolloTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        ApolloTestingModule,
      ],
      providers: [
        ArticleService
      ]
    });
    service = TestBed.inject(ArticleService);
    controller = TestBed.inject(ApolloTestingController);
  });

  afterEach(async () => {
    const apolloClient = TestBed.inject(Apollo).client;
    await apolloClient.clearStore();
  })

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should return a list of articles', (done) => {
    const mockArticlesServerResponse: GqlArticleResponse = {
      edges: [
        {
          article: {
            id: "cG9zdDoxMjc=",
            title: "Lorem Ipsum",
            date: "2022-01-06T22:00:53",
            uri: "/2022/01/06/lorem-ipsum/",
            categories: {
              edges: [
                {
                  category: {
                    id: "dGVybToy",
                    name: "General",
                    uri: "/category/general/"
                  }
                }
              ]
            }
          },
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        },
        {
          article: {
            id: "cG9zdDoxMjc=",
            title: "Lorem Ipsum",
            date: "2022-01-06T22:00:53",
            uri: "/2022/01/06/lorem-ipsum/",
            categories: {
              edges: [
                {
                  category: {
                    id: "dGVybToy",
                    name: "General",
                    uri: "/category/general/"
                  }
                },
                {
                  category: {
                    id: "dGVybToy",
                    name: "Something",
                    uri: "/category/general/"
                  }
                }
              ]
            }
          },
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        }
      ],
      pageInfo: {
        startCursor: "YXJyYXljb25uZWN0aW9uOjEyNw==",
        hasPreviousPage: false,
        hasNextPage: false,
        endCursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
      }
    };

    const mockArticlesServiceResponse: [PageInfo, Article[]] = [
      {
        startCursor: "YXJyYXljb25uZWN0aW9uOjEyNw==",
        hasPreviousPage: false,
        hasNextPage: false,
        endCursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
      },
      [
        {
          id: "cG9zdDoxMjc=",
          title: "Lorem Ipsum",
          date: "2022-01-06T22:00:53",
          uri: "/2022/01/06/lorem-ipsum/",
          categories: [
            {
              id: "dGVybToy",
              name: "General",
              uri: "/category/general/"
            }
          ],
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        },
        {
          id: "cG9zdDoxMjc=",
          title: "Lorem Ipsum",
          date: "2022-01-06T22:00:53",
          uri: "/2022/01/06/lorem-ipsum/",
          categories: [
            {
              id: "dGVybToy",
              name: "General",
              uri: "/category/general/"
            },
            {
              id: "dGVybToy",
              name: "Something",
              uri: "/category/general/"
            }
          ],
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        }
      ]
    ];

    service.getArticles().subscribe(resp => {
      expect(resp).toEqual(mockArticlesServiceResponse);
      done();
    });

    const req = controller.expectOne(getArticlesQuery);
    expect(req.operation.operationName).toBe('getArticlesQuery');
    req.flush({ data: { articles: mockArticlesServerResponse } });
    controller.verify();

  });
});

A big thank you to everyone for their collaboration and support!

Answer 4

I utilized nested map() functions to transform the GraphQL response into a more structured object.

Here is my final code for reference in case anyone encounters a similar question or issue.

NOTE: The code below uses "articles" instead of "posts," but applies the same principles.

models/article-gql.ts

interface GqlCategoryNode {
    category: {
        id: string;
        name: string;
        uri: string;
    };
}

interface GqlArticleNode {
    article: {
        id: string;
        title: string;
        date: string;
        uri: string;
        categories: {
            edges: GqlCategoryNode[]
        };
    };
    cursor: string;
}

export interface GqlArticleResponse {
    edges: GqlArticleNode[]
    pageInfo: {
        startCursor: string
        hasPreviousPage: boolean
        hasNextPage: boolean
        endCursor: string
    }
}

models/article.ts

interface Category {
    id: string;
    name: string;
    uri: string;
}

export interface Article {
    id: string;
    title: string;
    date: string;
    uri: string;
    categories: Category[];
    cursor: string;
}

export interface PageInfo {
    startCursor: string;
    hasPreviousPage: boolean;
    hasNextPage: boolean;
    endCursor: string;
}

article.service.ts

import { Injectable } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { map, Observable } from 'rxjs';
import { GraphQLResponse } from 'src/app/core/types/graphQLResponse';
import { Article, PageInfo } from '../models/article';
import { GqlArticleResponse } from '../models/article-gql';

export const getArticlesQuery = gql`
  query getArticlesQuery {
    articles: posts {
      edges {
        article: node {
          id
          title
          date
          uri
          categories {
            edges {
              category: node {
                id
                name
                uri
              }
            }
          }
        }
        cursor
      }
      pageInfo {
        startCursor
        hasPreviousPage
        hasNextPage
        endCursor
      }
    }
  }
`;

@Injectable({
  providedIn: 'root'
})
export class ArticleService {

  constructor(private apollo: Apollo) { }

  public getArticles(): Observable<[PageInfo, Article[]]> {
    return this.apollo.query<GraphQLResponse<'articles', GqlArticleResponse>>({
      query: getArticlesQuery
    }).pipe(map(resp => {
      return [
        resp.data.articles.pageInfo as PageInfo,
        resp.data.articles.edges.map((articleNode) => {
        return {
          id: articleNode.article.id,
          title: articleNode.article.title,
          date: articleNode.article.date,
          uri: articleNode.article.uri,
          cursor: articleNode.cursor,
          categories: articleNode.article.categories.edges.map((categoryNode) => {
            return {
              id: categoryNode.category.id,
              name: categoryNode.category.name,
              uri: categoryNode.category.uri
            }
          })
        }
      }]
    })) as Observable<[PageInfo, Article[]]>;
  }

}

article.service.spec.ts

In this section, I showcase how I transformed the server response within the service and verified the transformed response through testing.

import { TestBed } from '@angular/core/testing';
import { Apollo } from 'apollo-angular';
import { ApolloTestingController, ApolloTestingModule } from 'apollo-angular/testing';
import { Article, PageInfo } from '../models/article';
import { GqlArticleResponse } from '../models/article-gql';
import { ArticleService, getArticlesQuery } from './article.service';


describe('ArticleService', () => {
  let service: ArticleService;
  let controller: ApolloTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        ApolloTestingModule,
      ],
      providers: [
        ArticleService
      ]
    });
    service = TestBed.inject(ArticleService);
    controller = TestBed.inject(ApolloTestingController);
  });

  afterEach(async () => {
    const apolloClient = TestBed.inject(Apollo).client;
    await apolloClient.clearStore();
  })

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should return a list of articles', (done) => {
    const mockArticlesServerResponse: GqlArticleResponse = {
      edges: [
        {
          article: {
            id: "cG9zdDoxMjc=",
            title: "Lorem Ipsum",
            date: "2022-01-06T22:00:53",
            uri: "/2022/01/06/lorem-ipsum/",
            categories: {
              edges: [
                {
                  category: {
                    id: "dGVybToy",
                    name: "General",
                    uri: "/category/general/"
                  }
                }
              ]
            }
          },
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        },
        {
          article: {
            id: "cG9zdDoxMjc=",
            title: "Lorem Ipsum",
            date: "2022-01-06T22:00:53",
            uri: "/2022/01/06/lorem-ipsum/",
            categories: {
              edges: [
                {
                  category: {
                    id: "dGVybToy",
                    name: "General",
                    uri: "/category/general/"
                  }
                },
                {
                  category: {
                    id: "dGVybToy",
                    name: "Something",
                    uri: "/category/general/"
                  }
                }
              ]
            }
          },
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        }
      ],
      pageInfo: {
        startCursor: "YXJyYXljb25uZWN0aW9uOjEyNw==",
        hasPreviousPage: false,
        hasNextPage: false,
        endCursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
      }
    };

    const mockArticlesServiceResponse: [PageInfo, Article[]] = [
      {
        startCursor: "YXJyYXljb25uZWN0aW9uOjEyNw==",
        hasPreviousPage: false,
        hasNextPage: false,
        endCursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
      },
      [
        {
          id: "cG9zdDoxMjc=",
          title: "Lorem Ipsum",
          date: "2022-01-06T22:00:53",
          uri: "/2022/01/06/lorem-ipsum/",
          categories: [
            {
              id: "dGVybToy",
              name: "General",
              uri: "/category/general/"
            }
          ],
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        },
        {
          id: "cG9zdDoxMjc=",
          title: "Lorem Ipsum",
          date: "2022-01-06T22:00:53",
          uri: "/2022/01/06/lorem-ipsum/",
          categories: [
            {
              id: "dGVybToy",
              name: "General",
              uri: "/category/general/"
            },
            {
              id: "dGVybToy",
              name: "Something",
              uri: "/category/general/"
            }
          ],
          cursor: "YXJyYXljb25uZWN0aW9uOjEyNw=="
        }
      ]
    ];

    service.getArticles().subscribe(resp => {
      expect(resp).toEqual(mockArticlesServiceResponse);
      done();
    });

    const req = controller.expectOne(getArticlesQuery);
    expect(req.operation.operationName).toBe('getArticlesQuery');
    req.flush({ data: { articles: mockArticlesServerResponse } });
    controller.verify();

  });
});

A big thank you to everyone for their collaboration and support!

In need of assistance with shaping GraphQL output?

EDIT

post.service.ts

model/post.ts

Actual sample response (used for unit testing)

Answer №1

Answer №2

models/article-gql.ts

models/article.ts

article.service.ts

article.service.spec.ts

Similar questions

Using a function as a variable within jQuery's .click() method

Adjust the width of the iframe

Connect the visibility of one object to the visibility of another object

Utilizing dropzone.js with asp.net Web Forms

Why aren't the JavaScript stars shining once I've selected one?

Using Jquery to display text when the condition is not met

The step-by-step guide to testing an Angular promise using Jasmine

What are the differences between ajax loaded content and traditional content loading?

What is the best way to access a variable from outside a function in Node.js?

What could be causing Recharts to render an unidentified category on the yAxis?

What is the process for retrieving JSON data from a hosted PHP script using Javascript?

Hiding the C3 tooltip after engaging with it

AngularJs - Customizable dynamic tabs that automatically adapt

Error: React.js is unable to access the 'map' property because it is undefined

How to Align Content to the Left Inside a Grid List Using Angular Material

Ordering an array based on two integer properties using JavaScript

Tips on using b-table attributes thClass, tdClass, or class

What is the best way to store a small number of files in the state

Vue.js does not support animation for the Lodash shuffle function

"Clicking on a handler will replace the existing value when the same handler is used for multiple elements in