diff --git a/README.md b/README.md index ddfff7fa..7a5f1e7c 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,19 @@ async function main() { main() ``` +### Using vanilla JavaScript instead of TypeScript + +GraphClient CLI generates the client artifacts as TypeScript files by default but you can configure CLI to generate JavaScript and JSON files together with additional TypeScript definition files by using `--fileType js` or `--fileType json`. + +`js` flag generates all files as JavaScript files with ESM Syntax and `json` flag generates source artifacts as JSON files while entrypoint JavaScript file with old CommonJS syntax because only CommonJS supports JSON files as modules. + +Unless you use CommonJS(`require`) specifically, we'd recommend you to use `js` flag. + +`graphclient --fileType js` + +- [An example for JavaScript usage in CommonJS syntax with JSON files](/examples/javascript-cjs/) +- [An example for JavaScript usage in ESM syntax](/examples/javascript-esm/) + #### The Graph Client DevTools The Graph Client CLI comes with a built-in GraphiQL so you can experiemnt with queries in real time. diff --git a/examples/apollo/index.html b/examples/apollo/index.html index 9e7da671..38f38611 100644 --- a/examples/apollo/index.html +++ b/examples/apollo/index.html @@ -9,13 +9,5 @@
- diff --git a/examples/apollo/vite.config.ts b/examples/apollo/vite.config.ts index 5a33944a..2a3159aa 100644 --- a/examples/apollo/vite.config.ts +++ b/examples/apollo/vite.config.ts @@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + define: { + process: JSON.stringify({ + env: { + DEBUG: 1, + }, + }), + }, }) diff --git a/examples/execute/index.html b/examples/execute/index.html index 9e7da671..38f38611 100644 --- a/examples/execute/index.html +++ b/examples/execute/index.html @@ -9,13 +9,5 @@
- diff --git a/examples/execute/vite.config.ts b/examples/execute/vite.config.ts index 5a33944a..2a3159aa 100644 --- a/examples/execute/vite.config.ts +++ b/examples/execute/vite.config.ts @@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + define: { + process: JSON.stringify({ + env: { + DEBUG: 1, + }, + }), + }, }) diff --git a/examples/react-query/index.html b/examples/react-query/index.html index 9e7da671..38f38611 100644 --- a/examples/react-query/index.html +++ b/examples/react-query/index.html @@ -9,13 +9,5 @@
- diff --git a/examples/react-query/vite.config.ts b/examples/react-query/vite.config.ts index 5a33944a..2a3159aa 100644 --- a/examples/react-query/vite.config.ts +++ b/examples/react-query/vite.config.ts @@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + define: { + process: JSON.stringify({ + env: { + DEBUG: 1, + }, + }), + }, }) diff --git a/examples/urql/index.html b/examples/urql/index.html index 9e7da671..38f38611 100644 --- a/examples/urql/index.html +++ b/examples/urql/index.html @@ -9,13 +9,5 @@
- diff --git a/examples/urql/vite.config.ts b/examples/urql/vite.config.ts index 5a33944a..2a3159aa 100644 --- a/examples/urql/vite.config.ts +++ b/examples/urql/vite.config.ts @@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + define: { + process: JSON.stringify({ + env: { + DEBUG: 1, + }, + }), + }, })