From 10aeb706de46334db8216c65b2353c8d8683efc1 Mon Sep 17 00:00:00 2001 From: Arda TANRIKULU Date: Mon, 16 May 2022 17:47:42 +0300 Subject: [PATCH 1/2] Cleanup examples --- examples/apollo/index.html | 8 -------- examples/apollo/vite.config.ts | 7 +++++++ examples/execute/index.html | 8 -------- examples/execute/vite.config.ts | 7 +++++++ examples/react-query/index.html | 8 -------- examples/react-query/vite.config.ts | 7 +++++++ examples/urql/index.html | 8 -------- examples/urql/vite.config.ts | 7 +++++++ 8 files changed, 28 insertions(+), 32 deletions(-) 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, + }, + }), + }, }) From c69e1f9e01facc96587e64433c01e09274763048 Mon Sep 17 00:00:00 2001 From: Arda TANRIKULU Date: Mon, 16 May 2022 17:54:55 +0300 Subject: [PATCH 2/2] Add docs for JavaScript usage --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) 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.