New logger event-based relay

Environment.tsx

import {
  Environment,
  Network,
  RecordSource,
  Store,
} from 'relay-runtime';
import { RelayTransactionLogger } from './RelayTransactionLogger';

// Define a function that fetches the results of an operation (query/mutation/etc)

// Create a network layer from the fetch function
const network = Network.create(/* your fetchQuery */);
const store = new Store(new RecordSource())

const environment = new Environment({
  network,
  store,
  log: __DEV__ ? RelayTransactionLogger : null // log function
});

export default environment;

RelayTransactionLogger.tsx

import {
  OperationDescriptor,
  RequestParameters,
  Variables,
  GraphQLResponse,
} from '@types/relay-runtime';

export type LogEvent =
  {
    name: 'queryresource.fetch',
    operation: OperationDescriptor,
    // FetchPolicy from relay-experimental
    fetchPolicy: string,
    // RenderPolicy from relay-experimental
    renderPolicy: string,
    hasFullQuery: boolean,
    shouldFetch: boolean,
  }
  | {
    name: 'execute.info',
    transactionID: number,
    info: any,
  }
  | {
    name: 'execute.start',
    transactionID: number,
    params: RequestParameters,
    variables: Variables,
  }
  | {
      name: 'execute.next',
      transactionID: number,
      response: GraphQLResponse,
  }
  | {
    name: 'execute.error',
    transactionID: number,
    error: Error,
  }
  | {
    name: 'execute.complete',
    transactionID: number,
  }
  | {
    name: 'execute.unsubscribe',
    transactionID: number,
  };

const unlogged: {[key: number]: LogEvent}[] = [];

export const RelayTransactionLogger = (event: LogEvent) => {
  if (event.name === 'execute.start') {
    const { transactionID } = event;
    unlogged[transactionID] = [event];
    console.group('RELAY: ', unlogged[transactionID]);
    console.groupEnd();
  }
  if (event.name === 'execute.next') {
    const { transactionID } = event;
    unlogged[transactionID] = [...unlogged[transactionID], event];
    console.group('RELAY: ', unlogged[transactionID]);
    console.groupEnd();
  }
  if (event.name === 'execute.error' || event.name === 'execute.complete' || event.name === 'execute.unsubscribe') {
    const { transactionID } = event;
    console.group('RELAY: ', unlogged[transactionID]);
    delete unlogged[transactionID];
    console.groupEnd();
  }
};