Nominating Presidential Muppets

    ngx-urql
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    IMPORTANT: Under development, do not use it yet!

    ngx-urql

    A GraphQL Library that wraps the blazing-fast urql library for Angular usage.

    Getting started

    1. Install the libraries:
    yarn add ngx-urql graphql
    1. Register the NgxUrqlModule
    NgxUrqlModule.forRoot('https://fakeql.com/graphql/439b33402a495423dbaa6c467a59bcc0'),
    1. Inject the GraphQLClient in the component

      a) Consume the result observable declaratively.

      @Component({
        // ...
      })
      export class PostsComponent {
        public postsQuery = this.gql.query<PostsResponse>({
          query: `
            query Posts {
              posts {
                id
                title
              }
            }
          `,
        });
       
        constructor(private gql: GraphQLClient) {
        }
       
      } 

      WIP: The binding for postsQuery in *gqlData is only for Angular Template Type inference

      <ng-container [gqlQuery]="postsQuery">
       <div *gqlFetching>Loading...</div>
       <div *gqlData="postsQuery; let data">
         <a *ngFor="let p of data.posts" [routerLink]="p.id">{{p.title}}</a>
       </div>
       <div *gqlError="let error">{{error}}</div>
      </ng-container>

      c) Manipulate the result observable to consume it explicitly (i.e. here it would ignore the fetching state and possible errors)

      @Component({
       // ...
      })
      export class PostsComponent {
       public posts = this.gql.query<PostsResponse>({
         query: `
           query Posts {
             posts {
               id
               title
             }
           }
         `,
       }).pipe(
         map(r => r.data?.posts ?? [])
       );
       
       constructor(private gqlGraphQLClient) {
       }
       
      }

      c) Handle everything explicitly

      <ng-container *ngIf="postQuery | async as postResult">
        <ng-container *ngIf="postResult.fetching">Loading...</ng-container>
        <!--  This allows for partial data, while also allowing for errors in the response-->
        <ng-container *ngIf="postResult.data as data">
          <a *ngFor="let p of data.posts" [routerLink]="p.id">{{p.title}}</a>
        </ng-container>
        <ng-container *ngIf="postResult.error">{{postResult.error}}</ng-container>
      </ng-container>

    Install

    npm i ngx-urql

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    none

    Unpacked Size

    331 kB

    Total Files

    53

    Last publish

    Collaborators

    • alexandercarls