This link allows to log GraphQL queries for debugging purposes. So far it has been tested on the server and on the client side using a repo talking to https://fakerql.com/. Local tests are to come.

Installation

npm install apollo-link-log-query

Usage

Import and compose with other links using ApolloLink.from.

On the server side, go like this:

import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import gql from 'graphql-tag';
import fetch from 'node-fetch';
import { consoleLink } from 'apollo-link-log-query';

const client = new ApolloClient({
  link: ApolloLink.from([consoleLink, new HttpLink({uri: 'https://fakerql.com/graphql', fetch})]),
  cache: new InMemoryCache()
});

client.query({query: gql`
  query Users {
    allUsers(count: 1) {
      id
      firstName
      lastName
    }
  }
`})
  .then(data => console.log(data))
  .catch(error => console.error(error));

On the client side, go like this:

import React from 'react';
import { render } from 'react-dom';
import { ApolloProvider, Query } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import gql from 'graphql-tag';
import fetch from 'node-fetch';
import { consoleLink } from 'apollo-link-log-query';

const client = new ApolloClient({
  link: ApolloLink.from([consoleLink, new HttpLink({uri: 'https://fakerql.com/graphql', fetch})]),
  cache: new InMemoryCache()
});

const Users = () => (
  <Query
    query={gql`
      query Users {
        allUsers(count: 1) {
          id
          firstName
          lastName
        }
      }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      return data.allUsers.map(({ id, firstName, lastName }) => (
      <div key={id}>
        <p>{firstName} {lastName}</p>
      </div>
      ));
    }}
  </Query>
);

const App = () => (
  <ApolloProvider client={client}>
    <>
      <h2>My cool Apollo app! 🚀</h2>
      <Users/>
    </>
  </ApolloProvider>
);

render(<App />, document.getElementById("root"));

CHECKLIST

• update README with a descripton, installation instructions, and an example of usage
• set up compilation with Babel 7
  • use babel-preset-env
  • set browserslist according to best practices
  • use watch for development, add an npm script
  • verify that the transpiled code works on the server side
  • verify that the transpiled code works on the client side
• set up type checking with TypeScript
  • see tsconfig.json here and here
• write tests (see tests for apollo-link-http and this article on mocking)
• double-check the main field in package.json
• set up the prepublish(Only) script
• add .npmignore