npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

apollo-angular-boost

v1.9.0

Published

The easiest way to get started with Apollo Client in Angular

Downloads

206

Readme

Apollo Angular Boost

npm version Get on Slack

Purpose

Easiest way to get started with Apollo Client!

Apollo Angular Boost is a zero-config way to start using Apollo. It includes some sensible defaults, such as our recommended InMemoryCache and HttpLink, which come configured for you with our recommended settings.

Installation

npm install apollo-angular-boost --save

or

yarn add apollo-angular-boost

What's in Apollo Boost

Apollo Boost includes some packages that we think are essential to developing with Apollo Client. Here's what's in the box:

  • apollo-client: Where all the magic happens
  • apollo-angular: Integrates Apollo Client with Angular
  • apollo-cache-inmemory: Our recommended cache
  • apollo-angular-link-http: An Apollo Link for remote data fetching (based on Angular's HttpClient)
  • apollo-link-error: An Apollo Link for error handling
  • apollo-link-state: An Apollo Link for local state management
  • graphql-tag: Exports the gql function for your queries & mutations

The awesome thing about Apollo Boost is that you don't have to set any of this up yourself! Just specify a few options if you'd like to use these features and we'll take care of the rest.

Usage

How to set it up?

import {HttpClientModule} from '@angular/common/http';
import {ApolloBoostModule, ApolloBoost} from 'apollo-angular-boost';

@NgModule({
  imports: [HttpClientModule, ApolloBoostModule],
})
export class AppModule {
  constructor(apolloBoost: ApolloBoost) {
    apolloBoost.create({
      uri,
    });
  }
}

or via APOLLO_BOOST_CONFIG token:

import {HttpClientModule} from '@angular/common/http';
import {ApolloBoostModule, APOLLO_BOOST_CONFIG} from 'apollo-angular-boost';

@NgModule({
  imports: [HttpClientModule, ApolloBoostModule],
  providers: [{
    provide: APOLLO_BOOST_CONFIG,
    useFactory() {
      return {
        uri
      };
    }
  }]
})
export class AppModule {}

How to use it in a component or a service?

import {Apollo, gql} from 'apollo-angular-boost';

export class AppComponent {
  constructor(apollo: Apollo) {
    const allPosts = apollo.watchQuery({
      query: gql`
        query allPosts {
          posts {
            id
            title
            text
          }
        }
      `,
    });

    // ...
  }
}

To read more about the API and its usage, please visit Apollo Angular documentation.

Because Apollo service of apollo-angular-boost is the same service that apollo-angular exports the documentation works for both.

Apollo Boost options

Here are the options you can pass to the ApolloBoost exported from apollo-angular-boost. None of them are required.

  • uri: A string representing your GraphQL server endpoint. Defaults to /graphql
  • httpOptions: An object representing any options you would like to pass to HttpLink (withCredentials, headers, etc). These options are static, so they don't change on each request.
  • request?: (operation: Operation) => Promise;
    • This function is called on each request. It takes an operation and can return a promise. To dynamically set httpOptions, you can add them to the context of the operation with operation.setContext({ headers }). Any options set here will take precedence over httpOptions.
    • Use this function for authentication
  • onError: (errorObj: { graphQLErrors: GraphQLError[], networkError: Error, response?: ExecutionResult, operation: Operation }) => void
    • We include a default error handler to log out your errors for you. If you would like to handle your errors differently, specify this function
  • clientState: An object representing your configuration for apollo-link-state. This is useful if you would like to use the Apollo cache for local state management. Learn more in our quick start.
  • cacheRedirects: An map of functions to redirect a query to another entry in the cache before a request takes place. This is useful if you have a list of items and want to use the data from the list query on a detail page where you're querying an individual item. More on that here.

That's it! Here's an example of all those options in action:

import { ApolloBoost } from 'apollo-boost';

@NgModule({...})
export class GraphQLModule {
  constructor(apollo: ApolloBoost) {
    apollo.create({
      uri: 'https://5vxky4z9pl.sse.codesandbox.io/graphql',
      httpOptions: {
        withCredentials: true
      },
      request: async (operation) => {
        const token = await AsyncStorage.getItem('token');
        operation.setContext({
          headers: {
            authorization: token
          }
        });
      },
      onError: ({ graphQLErrors, networkError }) => {
        if (graphQLErrors) {
          sendToLoggingService(graphQLErrors);
        }
        if (networkError) {
          logoutUser();
        }
      },
      clientState: {
        defaults: {
          isConnected: true
        },
        resolvers: {
          Mutation: {
            updateNetworkStatus: (_, { isConnected }, { cache }) => {
              cache.writeData({ data: { isConnected }});
              return null;
            }
          }
        }
      },
      cacheRedirects: {
        Query: {
          movie: (_, { id }, { getCacheKey }) =>
            getCacheKey({ __typename: 'Movie', id });
        }
      }
    })
  }
}