Fragment Matcher

Package name	Weekly Downloads	Version	License	Updated
`@graphql-codegen/fragment-matcher`				Feb 6th, 2024

Installation

npm i -D @graphql-codegen/fragment-matcher

pnpm add -D @graphql-codegen/fragment-matcher

yarn add --dev @graphql-codegen/fragment-matcher

bun add --dev @graphql-codegen/fragment-matcher

This plugin generates an introspection file but only with Interfaces and Unions, based on your GraphQLSchema.

If you are using apollo-client and your schema contains interface or union declaration, it’s recommended to use Apollo’s Fragment Matcher and the result generated by the plugin.

You can read more about it in apollo-client documentation.

Fragment Matcher plugin accepts a TypeScript / JavaScript or a JSON file as an output (.ts, .tsx, .js, .jsx, .json).

Both in TypeScript and JavaScript a default export is being used.

The output is based on the output you choose for the output file name.

Config API Reference

`module`

type: string (values: commonjs, es2015) default: es2015

Compatible only with JSON extension, allow you to choose the export type, either module.exports or export default. Allowed values are: commonjs, es2015.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   schema: 'https://localhost:4000/graphql',
   documents: ['src/**\/*.tsx'],
   generates: {
     'path/to/file.json': {
       plugins: ['fragment-matcher'],
       config: {
         module: 'commonjs',
       },
     },
   },
 };
 export default config;

`apolloClientVersion`

type: number (values: 2, 3) default: 3

Compatible only with TS/TSX/JS/JSX extensions, allow you to generate output based on your Apollo-Client version. Valid values are: 2, 3.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   schema: 'https://localhost:4000/graphql',
   documents: ['src/**\/*.tsx'],
   generates: {
     'path/to/file.json': {
       plugins: ['fragment-matcher'],
       config: {
         apolloClientVersion: 3,
       },
     },
   },
 };
 export default config;

`useExplicitTyping`

type: boolean default: false

Create an explicit type based on your schema. This can help IDEs autofill your fragment matcher. This is mostly useful if you do more with your fragment matcher than just pass it to an Apollo-Client.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   schema: 'https://localhost:4000/graphql',
   documents: ['src/**\/*.tsx'],
   generates: {
     'path/to/file.json': {
       plugins: ['fragment-matcher'],
       config: {
         useExplicitTyping: true
       },
     },
   },
 };
 export default config;

`federation`

type: boolean

How to use?

If you are using Apollo Client 3, update your codegen config accordingly, and then use it in your Apollo cache instance:

import { InMemoryCache } from '@apollo/client'
 
// generated by Fragment Matcher plugin
import generatedIntrospection from '../introspection-result'
 
const cache = new InMemoryCache({ possibleTypes: generatedIntrospection.possibleTypes })

💡

add hasura-allow-list