apollo-link-http

What is apollo-link-http?

The apollo-link-http package is used to connect Apollo Client to a GraphQL server over HTTP. It provides a standard way to send GraphQL queries and mutations to a server, handle responses, and manage errors.

What are apollo-link-http's main functionalities?

Basic HTTP Link

This code demonstrates how to create a basic HTTP link to connect to a GraphQL server using the apollo-link-http package. The `createHttpLink` function is used to specify the URI of the GraphQL server, and the link is then used to configure the Apollo Client.

const { createHttpLink } = require('apollo-link-http');
const { ApolloClient, InMemoryCache } = require('@apollo/client');

const httpLink = createHttpLink({
  uri: 'https://example.com/graphql',
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

Setting HTTP Headers

This code demonstrates how to set HTTP headers, such as an authorization token, for each request. The `setContext` function from `apollo-link-context` is used to modify the headers before the request is sent.

const { createHttpLink } = require('apollo-link-http');
const { ApolloClient, InMemoryCache } = require('@apollo/client');
const { setContext } = require('apollo-link-context');

const httpLink = createHttpLink({
  uri: 'https://example.com/graphql',
});

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: localStorage.getItem('token') || '',
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

Error Handling

This code demonstrates how to handle errors in GraphQL requests. The `onError` function from `apollo-link-error` is used to log GraphQL and network errors.

const { createHttpLink } = require('apollo-link-http');
const { ApolloClient, InMemoryCache } = require('@apollo/client');
const { onError } = require('apollo-link-error');

const httpLink = createHttpLink({
  uri: 'https://example.com/graphql',
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
      console.log(`GraphQL error: ${message}`);
    });
  }
  if (networkError) {
    console.log(`Network error: ${networkError}`);
  }
});

const client = new ApolloClient({
  link: errorLink.concat(httpLink),
  cache: new InMemoryCache(),
});

Other packages similar to apollo-link-http

apollo-client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It includes functionalities for connecting to a GraphQL server, caching, and error handling, similar to apollo-link-http, but with a broader scope.

relay

Relay is a JavaScript framework for building data-driven React applications. It is similar to apollo-link-http in that it connects to a GraphQL server, but it also includes advanced features like data fetching, caching, and state management, optimized for performance.

urql

urql is a highly customizable and versatile GraphQL client for React. It provides similar functionalities to apollo-link-http, such as connecting to a GraphQL server and handling queries and mutations, but it is designed to be more lightweight and modular.

README

HTTP Link

Purpose

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

Installation

npm install apollo-link-http --save

To use this package in a web browser or mobile app, you'll need a build system capable of loading NPM packages on the client. Some common choices include Browserify, Webpack, and Meteor +1.3.

Usage

import HttpLink from "apollo-link-http";

const link = new HttpLink({ uri: "/graphql" });

Options

HTTP Link takes an object with three options on it to customize the behavoir 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

name	value	default	required
uri	string	"/graphql"	false
includeExtensions	boolean	false	false
fetch	ApolloFetch	ApolloFetch	false

By default, this link uses the Apollo Fetch library for the HTTP transport.

Context

The HTTP Link uses the headers field on the context to allow passing headers to the HTTP request.

name	value	default	required
headers	Headers (or object)	{}	false

import HttpLink from "apollo-link-http";
import ApolloClient from "apollo-client";
import InMemoryCache from "apollo-cache-inmemory";

const client = new ApolloClient({
  link: new HttpLink({ uri: "/graphql" }),
  cache: new InMemoryCache()
});

// a query with apollo-client
client.query({
  query: MY_QUERY,
  context: {
    // example of setting the headers with context per operation
    headers: {
      authoriztion: Meteor.userId()
    }
  }
})