Why do I need an Apollo hook logger?

When testing an application that uses Apollo's useQuery and useMutation hooks it's useful to know when a particular component rerenders with new data from the cache. This becomes particularly important when writing tests that mount the entire component tree since an unexpected query response in one component may cause a cache change in the component you are interested in.

This library allows you to create drop-in replacements for useQuery and useMutation that pretty-prints all the information needed to track what a particular hook is doing: the component the hook is used in, the response and the variables, loading and error states.

Task.tsx query GetTask($id: ObjectId!)  {
  variables: { id: '5d28a0751e99e53560577cd2' },
  loading: true,
  error: undefined,
  data: undefined
}

Task.tsx query GetTask($id: ObjectId!)  {
  variables: { id: '5d28a0751e99e53560577cd2' },
  loading: false,
  error: undefined,
  data: {
    task: {
      __typename: 'Task',
      id: '5d28a0751e99e53560577cd2',
      title: 'Fake Task',
    }
  }
}

In the case of useMutation it also keeps track of the variables used even when they are passed directly to the mutation:

const [addTask] = useMutation(ADD_TASK);
addTask({ variables: { title: 'New Task' } });

Results in

AddTask.tsx mutation AddTask($title: String)  {
  variables: { title: 'New Task' },
  loading: true,
  error: undefined,
  data: undefined
}

AddTask.tsx mutation AddTask($title: String)  {
  variables: { title: 'New Task' },
  loading: false,
  error: undefined,
  data: {
    addTask: {
      __typename: 'Task',
      id: '5d28a0151e99e53560577ca3',
      title: 'New Task'
    }
  }
}

Table of Contents

• Installation
• Usage
• Other Solutions
• LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev apollo-hook-logger

Usage

Jest

When using Jest you can easily log every query and mutation by using the exported @apollo/client mock:

jest.mock(
  '@apollo/client',
  () => jest.requireActual('apollo-hook-logger/dist/jest').default
)

I recommend using an environment variable to switch the logging on and off:

if (process.env.DEBUG_APOLLO) {
  jest.mock(
    '@apollo/client',
    () => jest.requireActual('apollo-hook-logger/dist/jest').default
  );
}

If you want to be able to log to a file, which is useful for when tests are run concurrently, you can use the createApolloLogger:

jest.mock('@apollo/client', () => {
  const { createApolloLogger } = jest.requireActual(
    'apollo-hook-logger/dist/jest'
  );
  return createApolloLogger({ logToFile: true });
})

Or using environment variables:

if (process.env.DEBUG_APOLLO) {
  jest.mock('@apollo/client', () => {
    const { createApolloLogger } = jest.requireActual(
      'apollo-hook-logger/dist/jest'
    );
    return createApolloLogger({
      logToFile: process.env.DEBUG_APOLLO.toLowerCase() === 'file',
    });
  });
}

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here!

LICENSE

MIT