Apollo Dynamic allows to create dynamic selection sets on queries, mutations and subscriptions when using @apollo/client for consult GraphQL resolvers. It works by decorating entity classes with @SelectionType and @SelectionField which allows to fabric dynamics selections set with a similar syntax as TypeORM repositories (relations).
This library is a wrapper of apollo-dynamic for Angular, it offer the same @Injectable classes as apollo-angular: Query, Mutation and Subscription. But with support for dynamic selection set based on Apollo Dynamic library. Given the new classes: DynamicQuery, DynamicMutation and DynamicSubscription.
$ npm install apollo-dynamic-angular # dependencies $ npm install apollo-dynamic apollo-angular @apollo/client graphqlWith this library you have to use the @SelectionType and @SelectionField from apollo-dynamic for decorate your entities interfaces and allow the selection set generation:
import{SelectionType,SelectionField}from'apollo-dynamic' @SelectionType('Person')exportclassPerson{ @SelectionField()id?: string; @SelectionField()firstname?: string; @SelectionField()lastname?: string; @SelectionField({include: 'isSuperAgent'})secret?: string; @SelectionField(()=>Profile)profile: Profile; @SelectionField(()=>Article)articles: Article[];} @SelectionType('Profile')exportclassProfile{ @SelectionField()avatar: string; @SelectionField()nickname: string;} @SelectionType('Article',{default: {relations: {artType: true}}})exportclassArticle{ @SelectionField({skip: (cond)=>cond.noIDsPlease})id: string, @SelectionField()name: string; @SelectionField(()=>Person)person: Person; @SelectionField(()=>ArticleType)artType: ArticleType;} @SelectionType('ArticleType')exportclassArticleType{ @SelectionField()category: string; @SelectionField()section: string;}But you can use this with apollo-angular mechanisms. For example:
constGET_PERSONS=gql` query GetPersons{ persons{ Person } }`;import{select}from'apollo-dynamic';import{Apollo}from'apollo-angular'; @Component({// ...})exportclassListPersonsimplementsOnInit{// inject angular-apolloconstructor(publicapollo: Apollo);ngOnInit(){// use it with the "select" functionthis.apollo.query({query: select(GET_PERSONS,{relations: {profile: true}})}).subscribe(/*...*/);}}Or better, with the new approach of apollo-angular:
import{gql}from'apollo-angular';import{DynamicQuery}from'apollo-dynamic-angular';// use "Dynamic" version of Query, Mutation or Subscription @Injectable({providedIn: 'root'})exportclassFindPersonsextendsDynamicQuery<{persons: Person[]}>{overridedocument=gql` query Persons{ persons{ Person } } `;}import{Component,OnInit}from'@angular/core';import{FindPersons,Person}from'./person.entity'; @Component({// ...})exportclassListPersonsimplementsOnInit{persons: Person[];// inject itconstructor(privatefindPersons: FindPersons){}ngOnInit(){// use itthis.persons=this.findPersons({relations: {profile: true}}).fetch().subscribe({next: ({ data }: any)=>{persons=data.persons;},error: (error: any)=>{console.log(error);}});}}Same apply for Mutations and Subscriptions.
Please consider reading the apollo-dynamic and apollo-angular usage guides for more information.
- Author - Giuliano Marinelli
- Website - https://github.com/giuliano-marinelli
This package is MIT licensed.