Skip to main content

Create Custom Highlighters

Highlighters return highlighted References, that is an array of either Type References or Field References, for a given schema. There are already a number of useful highlighters provided by graphql-mocks out-of-the-box.

A highlighter must conform to the Highlighter interface. This interface is simply a mark function on an object:

{
mark(schema: GraphQLSchema): Reference[]
}

Stateless Highlighters

The simplest highlighter to create is one that does not have any state, which can simply be a POJO that conforms to the Highlighter interface.

const customHighlighter = {
mark(schema) {
// return an array of highlighted References
return [];
}
}

If there are options to the highlighter consider using a function factory:

export const customHighlighter = (options) => {
// make use of `options` in scope
return {
mark(schema) {
// return an array of highlighted References
return [];
}
}
}

Stateful Highlighters

If a highlighter needs to hold on to state it's useful to create a class that implements the Highlighter interface, like many of the highlighters provided out-of-the-box, with additional state can be kept on class properties.

import { Highlighter } from 'graphql-mocks/highlight/types';

class CustomHighlighter implements Highlighter {
constructor(/* relevant options*/) {
}

// required `mark` method
mark(schema) {
// return an array of highlighted References
return [];
}
}

Generally, by design highlighters if there are options to a Highlighter for a constructor it's easier to provide a factory function to pass along and construct the instance. For example, continuing with the CustomHighlighter class above:

export const customHighlighter = (options) => new CustomHighlighter(options);

While minimal it provides a more ergonomic API without have to new each Highlighter for use.

hi(graphqlSchema).include(
customHighlighter({ /* options */ })
);

Highlight All

If a highlighter has the notion of "highlight all", by convention, it's useful to consider these these two cases:

  • Use the HIGHLIGHT_ALL constant as an option
  • If possible, calling the highlighter without arguments, provides the highlight all case