feat(gcl): new fragmentPaths option (#4)

finspot · Sep 18, 2023 · 73430b8 · 73430b8
1 parent 7e5556e
commit 73430b8
Show file tree

Hide file tree

Showing 11 changed files with 237 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -70,21 +70,22 @@ module.exports = {
 
 **Root**
 
-| Name             | Type                  | Required | Default value   | Description |
-|------------------|-----------------------|----------|-----------------|-------------|
-| emitFiles        | `boolean`             | ❌       | `false`         | If true, <ins>graphql-codegen-loader</ins> will generate a declaration file beside all imported document files (see. [Bare usage](#bare-usage)) |
-| plugins          | `(Plugin \| string)[]` | ❌       | `[]`           | Plugins to be added to the GraphQl Code Generator configuration (cf. [plugins](https://the-guild.dev/graphql/codegen/plugins)). |
-| schema           | `string`              | ✅       | N/A             | GraphQL schema (cf. [schema field](https://the-guild.dev/graphql/codegen/docs/config-reference/schema-field)). |
-| schemaTypesPath  | `string`              | ✅       | N/A             | Folder where the default types will be added. During compile time, <ins>graphql-codegen-loader</ins> will generate a declaration file for all your schema types (interfaces, scalars...): **schema.d.ts**. If your schema contains enums, it will also generate a Typescript file: **enums.ts**, to refer to enums (as a type and as a value) in your application. |
-| typescriptConfig | `string`              | ❌       | `tsconfig.json` | Path to your Typescript configuration file. |
-| useWorkspaces    | `boolean`             | ❌       | `false`         | If true, all the generated files will refer to other files using the `@workspace/` syntax instead of a relative import. |
+| Name             | Type                   | Required | Default value   | Description                                                                                                                                                                                                                                                                                                                                                        |
+| ---------------- | ---------------------- | -------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| emitFiles        | `boolean`              | ❌       | `false`         | If true, <ins>graphql-codegen-loader</ins> will generate a declaration file beside all imported document files (see. [Bare usage](#bare-usage))                                                                                                                                                                                                                    |
+| fragmentsPaths   | `string[]`             | ❌       | `[]`            | List of fragments file path that are shared across multiple queries and therefore need to be interpreted by <ins>graphql-codegen-loader</ins>.                                                                                                                                                                                                                     |
+| plugins          | `(Plugin \| string)[]` | ❌       | `[]`            | Plugins to be added to the GraphQl Code Generator configuration (cf. [plugins](https://the-guild.dev/graphql/codegen/plugins)).                                                                                                                                                                                                                                    |
+| schema           | `string`               | ✅       | N/A             | GraphQL schema (cf. [schema field](https://the-guild.dev/graphql/codegen/docs/config-reference/schema-field)).                                                                                                                                                                                                                                                     |
+| schemaTypesPath  | `string`               | ✅       | N/A             | Folder where the default types will be added. During compile time, <ins>graphql-codegen-loader</ins> will generate a declaration file for all your schema types (interfaces, scalars...): **schema.d.ts**. If your schema contains enums, it will also generate a Typescript file: **enums.ts**, to refer to enums (as a type and as a value) in your application. |
+| typescriptConfig | `string`               | ❌       | `tsconfig.json` | Path to your Typescript configuration file.                                                                                                                                                                                                                                                                                                                        |
+| useWorkspaces    | `boolean`              | ❌       | `false`         | If true, all the generated files will refer to other files using the `@workspace/` syntax instead of a relative import.                                                                                                                                                                                                                                            |
 
 **Plugin**
 
-| Name    | Type   | Required | Default value | Description |
-|---------|--------|----------|---------------|-------------|
+| Name    | Type   | Required | Default value | Description       |
+| ------- | ------ | -------- | ------------- | ----------------- |
 | options | object | ❌       | {}            | Plugin's options. |
-| plugin  | string | ✅       | N/A           | Plugin's name. |
+| plugin  | string | ✅       | N/A           | Plugin's name.    |
 
 ## Usage
 
@@ -121,6 +122,7 @@ query Films {
 ```ts
 // index.ts
 import { FilmsQuery } from './films.gql'
+
 // FilmsQuery is a type
 ```
 
@@ -142,23 +144,24 @@ This comes very handy. It generates 2 files:
 
 ```ts
 // films.gql.d.ts
-import * as Types from '../../types/schema';
+import * as Types from '../../types/schema'
+
 export type FilmsQueryVariables = Types.Exact<{
-    [key: string]: never;
-}>;
+  [key: string]: never
+}>
 export type FilmsQuery = {
-    __typename?: 'Root';
-    allFilms?: {
-        __typename?: 'FilmsConnection';
-        films?: Array<{
-            __typename?: 'Film';
-            director?: string | null;
-            id: string;
-            releaseDate?: string | null;
-            title?: string | null;
-        } | null> | null;
-    } | null;
-};
+  __typename?: 'Root'
+  allFilms?: {
+    __typename?: 'FilmsConnection'
+    films?: Array<{
+      __typename?: 'Film'
+      director?: string | null
+      id: string
+      releaseDate?: string | null
+      title?: string | null
+    } | null> | null
+  } | null
+}
 ```
 
 From now on, your IDE should be able to understand `*.gql` imports, and your type checking should not throw any errors.

diff --git a/examples/react/src/common/fragments.graphql b/examples/react/src/common/fragments.graphql
@@ -0,0 +1,6 @@
+fragment FilmBase on Film {
+  director
+  id
+  releaseDate
+  title
+}
diff --git a/examples/react/src/fiche/film/film.graphql b/examples/react/src/fiche/film/film.graphql
@@ -1,10 +1,7 @@
 query Film($id: ID!) {
   film(id: $id) {
-    director
-    id
+    ...FilmBase
     openingCrawl
     producers
-    releaseDate
-    title
   }
 }
diff --git a/examples/react/src/fiche/film/film.graphql.d.ts b/examples/react/src/fiche/film/film.graphql.d.ts
@@ -1,20 +1,28 @@
 import * as Types from '../../types/schema';
 import * as Apollo from '@apollo/client';
+export type FilmBaseFragment = {
+    __typename?: 'Film';
+    director?: string | null;
+    id: string;
+    releaseDate?: string | null;
+    title?: string | null;
+};
 export type FilmQueryVariables = Types.Exact<{
     id: Types.Scalars['ID'];
 }>;
 export type FilmQuery = {
     __typename?: 'Root';
     film?: {
         __typename?: 'Film';
-        director?: string | null;
-        id: string;
         openingCrawl?: string | null;
         producers?: Array<string | null> | null;
+        director?: string | null;
+        id: string;
         releaseDate?: string | null;
         title?: string | null;
     } | null;
 };
+export declare const FilmBaseFragmentDoc: Apollo.DocumentNode;
 export declare const FilmDocument: Apollo.DocumentNode;
 /**
  * __useFilmQuery__

diff --git a/examples/react/src/library/films/films.graphql b/examples/react/src/library/films/films.graphql
@@ -1,10 +1,7 @@
 query Films {
   allFilms {
     films {
-      director
-      id
-      releaseDate
-      title
+      ...FilmBase
     }
   }
 }
diff --git a/examples/react/src/library/films/films.graphql.d.ts b/examples/react/src/library/films/films.graphql.d.ts
@@ -1,5 +1,12 @@
 import * as Types from '../../types/schema';
 import * as Apollo from '@apollo/client';
+export type FilmBaseFragment = {
+    __typename?: 'Film';
+    director?: string | null;
+    id: string;
+    releaseDate?: string | null;
+    title?: string | null;
+};
 export type FilmsQueryVariables = Types.Exact<{
     [key: string]: never;
 }>;
@@ -16,6 +23,7 @@ export type FilmsQuery = {
         } | null> | null;
     } | null;
 };
+export declare const FilmBaseFragmentDoc: Apollo.DocumentNode;
 export declare const FilmsDocument: Apollo.DocumentNode;
 /**
  * __useFilmsQuery__

diff --git a/examples/react/webpack.js b/examples/react/webpack.js
@@ -30,6 +30,7 @@ module.exports = {
                 loader: '@pretto/graphql-codegen-loader',
                 options: {
                   emitFiles: true,
+                  fragmentsPaths: [path.join(__dirname, 'src/common/fragments.graphql')],
                   plugins: ['typescript-react-apollo'],
                   schema: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
                   schemaTypesPath: path.join(__dirname, 'src/types'),

diff --git a/index.js b/index.js
@@ -6,6 +6,7 @@ const cache = new Map()
 
 const defaultOptions = {
   emitFiles: false,
+  fragmentsPaths: [],
   plugins: [],
   typescriptConfig: 'tsconfig.json',
   useWorspaces: false,
@@ -17,6 +18,12 @@ const schema = {
     emitFiles: {
       type: 'boolean',
     },
+    fragmentsPaths: {
+      items: {
+        anyOf: [{ type: 'string' }],
+      },
+      type: 'array',
+    },
     plugins: {
       items: {
         anyOf: [

diff --git a/lib/generateTypesFiles.js b/lib/generateTypesFiles.js
@@ -1,4 +1,5 @@
 const { generate } = require('@graphql-codegen/cli')
+const glob = require('glob')
 const path = require('path')
 
 const ENUMS_PATHNAME = './enums'
@@ -21,6 +22,8 @@ module.exports.generateTypesFiles = async function generateTypesFiles(
     ? path.join(name, path.relative(rootPath, options.schemaTypesPath), ENUMS_PATHNAME)
     : ENUMS_PATHNAME
 
+  const fragmentsPaths = [...glob.sync(path.join(rootPath, 'src/data/*.graphql')), ...options.fragmentsPaths]
+
   const typesPath = options.useWorkspaces
     ? path.join(name, path.relative(rootPath, options.schemaTypesPath), SCHEMA_PATHNAME)
     : path.join(path.relative(path.dirname(documentPath), options.schemaTypesPath), SCHEMA_PATHNAME)
@@ -64,7 +67,7 @@ module.exports.generateTypesFiles = async function generateTypesFiles(
     generates: {
       ...generates,
       [localTypesPath]: {
-        documents: [documentPath],
+        documents: [...fragmentsPaths, documentPath],
         plugins: [
           {
             'typescript-operations': {

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@graphql-codegen/typescript": "^2.8.5",
     "@graphql-codegen/typescript-operations": "^2.5.10",
     "fs-extra": "^11.1.0",
+    "glob": "^10.3.4",
     "schema-utils": "^4.0.0"
   },
   "peerDependencies": {