Merge pull request #1229 from Quramy/add_gql_codegen_example

docs: Add example using graphql-codegen

.prettierignore

@@ -7,5 +7,6 @@ e2e_coverage/
 .husky/
 project-fixtures/**/*.invalid.json
 project-fixtures/**/__generated__/
+project-fixtures/**/gql/
 project-fixtures/**/manifest.json
 project-fixtures/**/GRAPHQL_OPERATIONS.md

e2e/cli-specs/report.js

@@ -4,18 +4,14 @@ const assert = require('assert');
 const rimraf = require('rimraf');
 
 async function run(cli) {
-  const reportPath = 'project-fixtures/react-apollo-prj/GRAPHQL_OPERATIONS.md';
-  rimraf.sync(path.resolve(__dirname, '../..', reportPath));
-  const { code } = await cli.run('report', [
-    '-p',
-    'project-fixtures/react-apollo-prj',
-    '--verbose',
-    '-o',
-    reportPath,
-    '--includeFragments',
-  ]);
-  assert.equal(fs.existsSync(path.resolve(__dirname, '../../', reportPath)), true);
-  assert.equal(code, 0);
+  const fixtureDirs = ['project-fixtures/graphql-codegen-prj', 'project-fixtures/react-apollo-prj'];
+  for (const fixtureDir of fixtureDirs) {
+    const reportPath = `${fixtureDir}/GRAPHQL_OPERATIONS.md`;
+    rimraf.sync(path.resolve(__dirname, '../..', reportPath));
+    const { code } = await cli.run('report', ['-p', fixtureDir, '--verbose', '-o', reportPath, '--includeFragments']);
+    assert.equal(fs.existsSync(path.resolve(__dirname, '../../', reportPath)), true);
+    assert.equal(code, 0);
+  }
 }
 
 module.exports = run;

e2e/cli-specs/validate.js

@@ -1,8 +1,15 @@
 const assert = require('assert');
 
 async function run(cli) {
-  const { code } = await cli.run('validate', ['-p', 'project-fixtures/gql-errors-prj', '--verbose']);
-  assert.equal(code, 1);
+  for (const fixtureDir of ['project-fixtures/gql-errors-prj']) {
+    const { code } = await cli.run('validate', ['-p', fixtureDir, '--verbose']);
+    assert.equal(code, 1);
+  }
+
+  for (const fixtureDir of ['project-fixtures/react-apollo-prj', 'project-fixtures/graphql-codegen-prj']) {
+    const { code } = await cli.run('validate', ['-p', fixtureDir, '--verbose']);
+    assert.equal(code, 0);
+  }
 }
 
 module.exports = run;

project-fixtures/graphql-codegen-prj/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

project-fixtures/graphql-codegen-prj/GRAPHQL_OPERATIONS.md

@@ -0,0 +1,40 @@
+# Extracted GraphQL Operations
+## Queries
+
+### AppQuery
+
+```graphql
+query AppQuery {
+  popularPosts {
+    id
+    ...Post_Post
+  }
+}
+
+fragment Post_Post on Post {
+  title
+  author {
+    name
+  }
+}
+```
+
+From [src/App.tsx:24:24](src/App.tsx#L24-L31)
+
+## Fragments
+
+### Post_Post
+
+```graphql
+fragment Post_Post on Post {
+  title
+  author {
+    name
+  }
+}
+```
+
+From [src/App.tsx:5:31](src/App.tsx#L5-L12)
+
+---
+Extracted by [ts-graphql-plugin](https://github.com/Quramy/ts-graphql-plugin)

project-fixtures/graphql-codegen-prj/README.md

@@ -0,0 +1,13 @@
+# graphql-codege example
+
+## How to run this example
+
+- (At the root of ts-graphql-plugin project directory)
+  - Execute `npm link` command.
+
+```sh
+$ cd project-fixtures/graphql-codegen-prj
+$ npm install
+$ npm link ts-graphql-plugin
+$ code .
+```

project-fixtures/graphql-codegen-prj/codegen.ts

@@ -0,0 +1,14 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: 'schema.graphql',
+  documents: ['src/**/*.tsx'],
+  generates: {
+    'src/gql/': {
+      preset: 'client',
+    },
+  },
+};
+
+export default config;