diff --git a/website/src/app/(docs)/references/graphql-loader/page.tsx b/website/src/app/(docs)/references/graphql-loader/page.tsx new file mode 100644 index 0000000..10b7c88 --- /dev/null +++ b/website/src/app/(docs)/references/graphql-loader/page.tsx @@ -0,0 +1,73 @@ +import Link from "next/link"; +import { Highlight } from "@/app/_utils/Highlight"; +import { Toc } from "../../_toc"; +import { Breadcrumb } from "@/app/_utils/Breadcrumb"; +import { ogp } from "@/app/_utils/metadata"; +import { Hint } from "@/app/_utils/Hint"; + +export const metadata = ogp({ + title: "@nitrogql/graphql-loader reference", +}); + +export default function GraphQLLoader() { + return ( + +
+ +

+ @nitrogql/graphql-loader reference +

+

+ @nitrogql/graphql-loader is a Webpack loader that + processes GraphQL files. This package is suited for projects that use + Webpack or Next.js as a build tool. +

+

Example

+

+ webpack.config.js +

+ {`module.exports = { + module: { + rules: [ + { + test: /\.graphql$/, + loader: "@nitrogql/graphql-loader", + options: { + configFile: "./graphql.config.yaml", + }, + }, + ], + }, +};`} + +

options

+

+ Currently, @nitrogql/graphql-loader supports only one + option: configFile. +

+ +

options.configFile

+

+ Path to the{" "} + configuration file. + Relative paths are resolved relative to{" "} + + Webpack's context + + . +

+ + 🚟 When omitted, no configuration file is loaded, meaning that the + default configuration is used. We recommend always specifying a + configuration file. + +
+ + ); +} diff --git a/website/src/app/(docs)/references/jest-transform/page.tsx b/website/src/app/(docs)/references/jest-transform/page.tsx new file mode 100644 index 0000000..e59a6ee --- /dev/null +++ b/website/src/app/(docs)/references/jest-transform/page.tsx @@ -0,0 +1,92 @@ +import Link from "next/link"; +import { Highlight } from "@/app/_utils/Highlight"; +import { Toc } from "../../_toc"; +import { Breadcrumb } from "@/app/_utils/Breadcrumb"; +import { ogp } from "@/app/_utils/metadata"; +import { Hint } from "@/app/_utils/Hint"; + +export const metadata = ogp({ + title: "@nitrogql/jest-transform reference", +}); + +export default function JestTransform() { + return ( + +
+ +

+ @nitrogql/jest-transform reference +

+

+ @nitrogql/jest-transform is a Jest transformer that lets + you load .graphql files from your code during testing. + This package is suited for projects that use Jest to test client-side + code that uses GraphQL. +

+

Example

+

+ jest.config.js +

+ {`{ + "transform": { + "^.+\\.graphql$": ["@nitrogql/jest-transform", { + "configFile": path.resolve(__dirname, "nitrogql.config.js") + }] + } +}`} + +

options

+ +

options.configFile

+

+ Path to the{" "} + configuration file. +

+ +

options.additionalTransformer

+

+ Additional transformer to apply to the generated source code. Can be a + string or an array of two elements: the transformer name and the + transformer configuration. See below for more information. +

+ +

+ options.additionalTransformerFilenameSuffix +

+

+ Suffix to add to filename when passing code to the additional + transformer. Defaults to ".js". +

+ +

CommonJS Support

+

+ @nitrogql/jest-transform is only capable of transforming + GraphQL files to ES modules. If you need CommonJS support, use the{" "} + additionalTransformer option to apply another transformer + that can convert ES modules to CommonJS. +

+

+ Example setup with ts-jest: +

+ {`{ + "transform": { + "^.+\.tsx?": ["ts-jest", { isolatedModules: true }], + "^.+\\.graphql$": ["@nitrogql/jest-transform", { + "configFile": path.resolve(__dirname, "nitrogql.config.yml"), + + // Use the additionalTransformer option to apply ts-jest to the output. + "additionalTransformer": ["ts-jest", { isolatedModules: true }], + + // ts-jest expects .ts files, so we need to change the file extension + // by applying the additionalTransformerFilenameSuffix option. + "additionalTransformerFilenameSuffix": ".ts" + }] + }, +}`} +
+ + ); +} diff --git a/website/src/app/(docs)/references/page.tsx b/website/src/app/(docs)/references/page.tsx index 00a5aef..1541c82 100644 --- a/website/src/app/(docs)/references/page.tsx +++ b/website/src/app/(docs)/references/page.tsx @@ -27,10 +27,31 @@ export default function References() {

Packages

+

+ Packages not listed here are considered internal. They are not meant + to be used directly and are subject to change without a major version + bump. +

+

Generated Files

diff --git a/website/src/app/(docs)/references/rollup-plugin/page.tsx b/website/src/app/(docs)/references/rollup-plugin/page.tsx new file mode 100644 index 0000000..6f5d992 --- /dev/null +++ b/website/src/app/(docs)/references/rollup-plugin/page.tsx @@ -0,0 +1,68 @@ +import Link from "next/link"; +import { Highlight } from "@/app/_utils/Highlight"; +import { Toc } from "../../_toc"; +import { Breadcrumb } from "@/app/_utils/Breadcrumb"; +import { ogp } from "@/app/_utils/metadata"; +import { Hint } from "@/app/_utils/Hint"; + +export const metadata = ogp({ + title: "@nitrogql/rollup-plugin reference", +}); + +export default function RollupPlugin() { + return ( + +

+ +

+ @nitrogql/rollup-plugin reference +

+

+ @nitrogql/rollup-plugin is a Rollup plugin that processes + GraphQL files. This package is suited for projects that use Rollup or + Vite as a build tool. +

+

Example

+

+ rollup.config.js +

+ {`import nitrogql from "@nitrogql/rollup-plugin"; +{ + plugins: [ + nitrogql({ + configFile: "./graphql.config.ts", + include: ["**/*.graphql"], + }), + ], +};`} + +

options

+ +

options.configFile

+

+ Path to the{" "} + configuration file. + Relative paths are resolved relative to the project root in case of + Vite, and relative to the current working directory in case of Rollup. +

+ + 🚟 When omitted, no configuration file is loaded, meaning that the + default configuration is used. We recommend always specifying a + configuration file. + + +

options.include

+

An array of glob patterns that specify the files to process.

+ +

options.exclude

+

+ An array of glob patterns that specify the files to ignore even if + they match the include patterns. +

+
+ + ); +}