Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including apollo-angular-link-http with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. require("@angular/common/package.json"); // @angular/common is a peer dependency. require("apollo-link/package.json"); // apollo-link is a peer dependency. require("graphql/package.json"); // graphql is a peer dependency. var apolloAngularLinkHttp = require("apollo-angular-link-http")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

apollo-angular-link-http v1.6.0

An Apollo Link to allow sending a single http request per operation.

HTTP Link

npm version Get on Slack

Purpose

An Apollo Link to allow sending a single http request per operation.

Installation

npm install apollo-angular-link-http --save

Usage

import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http';

@NgModule({
  imports: [HttpLinkModule],
})
class AppModule {
  constructor(httpLink: HttpLink) {
    const link = httpLink.create({uri: '/graphql'});
  }
}

HttpClient

The HTTP Link relies on having HttpClient (from @angular/common/http) present in your application.

Options

HTTP Link takes an object with some options on it to customize the behavior of the link. If your server supports it, the HTTP link can also send over metadata about the request in the extensions field. To enable this, pass includeExtensions as true. If you would like to use persisted queries or just not to send a query, disable includeQuery.

namevaluedefaultrequired
uristring / function/graphqlfalse
includeExtensionsbooleanfalsefalse
includeQuerybooleantruefalse
headersHttpHeadersnonefalse
withCredentialsbooleannonefalse
methodstringPOSTfalse

Context

The HTTP Link uses the headers field on the context to allow passing headers to the HTTP request. It also supports the withCredentials field for defining credentials policy for request. These options will override the same key if passed when creating the the link. If some setting is different than the one in Options, this one will be used.

namevaluedefaultrequired
uristringas in optionsfalse
includeExtensionsbooleanas in optionsfalse
includeQuerybooleanas in optionsfalse
headersHttpHeadersnonefalse
withCredentialsbooleanas in optionsfalse
methodstringas in optionsfalse
useMultipartbooleanas in optionsfalse
import {HttpLinkModule, HttpLink} from 'apollo-link-http';
import {ApolloModule, Apollo} from 'apollo-angular';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {HttpClientModule} from '@angular/common/http';

@NgModules({
  imports: [HttpClientModule, ApolloModule, HttpLinkModule],
})
class AppModule {
  constructor(apollo: Apollo, httpLink: httpLink) {
    apollo.create({
      link: httpLink.create({uri: '/graphql'}),
      cache: new InMemoryCache(),
    });
  }
}

// a query with apollo-angular
apollo.query({
  query: MY_QUERY,
  context: {
    // example of setting the headers with context per operation
    headers: new HttpHeaders().set('X-Custom-Header', 'custom-value'),
  },
});

Uri as function

@NgModules({
  imports: [HttpClientModule, ApolloModule, HttpLinkModule],
})
class AppModule {
  constructor(apollo: Apollo, httpLink: httpLink) {
    apollo.create({
      link: httpLink.create({
        uri(operation) {
          return operation.operationName === 'login' ? '/auth' : '/graphq';
        },
      }),
      cache: new InMemoryCache(),
    });
  }
}

File upload

In order to upload a file, you need to turn on useMultipart flag:

apollo.query({
  query: MY_QUERY,
  context: {
    useMultipart: true
  },
});

Middleware

import {ApolloLink} from 'apollo-link';
import {HttpLink} from 'apollo-angular-link-http';

class AppModule {
  constructor(httpLink: HttpLink) {
    const http = httpLink.create({uri: '/graphql'});
    const middleware = new ApolloLink((operation, forward) => {
      operation.setContext({
        headers: new HttpHeaders().set(
          'Authorization',
          localStorage.getItem('token') || null,
        ),
      });
      return forward(operation);
    });

    const link = middleware.concat(http);
  }
}

Afterware (error)

import {ApolloLink} from 'apollo-link';
import {HttpLink} from 'apollo-angular-link-http';
import {onError} from 'apollo-link-error';

import {Auth} from './auth.service';

class AppModule {
  constructor(httpLink: HttpLink, auth: Auth) {
    const http = httpLink.create({uri: '/graphql'});
    const error = onError(({networkError}) => {
      if (networkError.status === 401) {
        auth.logout();
      }
    });

    const link = error.concat(http);
  }
}
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free