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