add docs

packages/plugins/other/visitor-plugin-common/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@graphql-tools/optimize": "^1.0.1",
     "@graphql-codegen/plugin-helpers": "^1.18.7",
-    "@graphql-tools/relay-operation-optimizer": "6.3.1-alpha-bbb5746f.0",
+    "@graphql-tools/relay-operation-optimizer": "^6.3.0",
     "array.prototype.flatmap": "^1.2.4",
     "auto-bind": "~4.0.0",
     "dependency-graph": "^0.11.0",

packages/presets/gql-tag/src/index.ts

@@ -7,12 +7,10 @@ import * as typescriptPlugin from '@graphql-codegen/typescript';
 import * as gqlTagPlugin from '@graphql-codegen/gql-tag';
 import { processSources } from './process-sources';
 
-export const preset: Types.OutputPreset<{
-  packageName: string;
-}> = {
-  buildGeneratesSection: options => {
-    const packageName = options.presetConfig.packageName ?? `@app/gql`;
+export type GqlTagConfig = {};
 
+export const preset: Types.OutputPreset<GqlTagConfig> = {
+  buildGeneratesSection: options => {
     const sourcesWithOperations = processSources(options.documents);
     const sources = sourcesWithOperations.map(({ source }) => source);
 
@@ -35,7 +33,7 @@ export const preset: Types.OutputPreset<{
 
     const genDtsPlugins: Array<Types.ConfiguredPlugin> = [
       { [`add`]: { content: `/* eslint-disable */` } },
-      { [`gen-dts`]: { sourcesWithOperations, packageName } },
+      { [`gen-dts`]: { sourcesWithOperations } },
     ];
 
     return [

packages/utils/config-schema/src/docs.ts

@@ -21,7 +21,10 @@ export function generateDocs(schema: TJS.Definition, types: (PluginConfig | Pres
 :::shell Using \`yarn\`
     yarn add -D @graphql-codegen/${p.name}
 :::\n\n`;
-    content += `## API Reference\n\n${apiDocs}`;
+
+    if (apiDocs) {
+      content += `## API Reference\n\n${apiDocs}`;
+    }
 
     result[p.name] = content;
   }

packages/utils/config-schema/src/plugins.ts

@@ -17,6 +17,11 @@ export const presetsConfigurations: PresetConfig[] = [
     identifier: 'ImportTypesConfig',
     name: 'import-types-preset',
   },
+  {
+    file: '../../presets/gql-tag/src/index.ts',
+    identifier: 'GqlTagConfig',
+    name: 'gql-tag-preset',
+  },
 ];
 
 export const pluginsConfigurations: PluginConfig[] = [

website/docs/presets/gql-tag.md

@@ -0,0 +1,104 @@
+---
+id: gql-tag
+title: gql-tag
+---
+
+This preset generates typings for your inline `gql` function usages, without having to manually specify import statements for the documents. All you need to do is import your `gql` function and run codegen in watch mode.
+
+Huge thanks to [Maël Nison](https://github.com/arcanis), who conceptualized the foundation for this preset [over here](https://github.com/arcanis/graphql-typescript-integration).
+
+```ts
+import { gql } from '@app/gql';
+
+// TweetFragment is a fully typed document node
+const TweetFragment = gql(/* GraphQL */ `
+  fragment TweetFragment on Tweet {
+    id
+    body
+  }
+`);
+
+const TweetsQueryWithFragment = gql(/* GraphQL */ `
+  query TweetsWithFragmentQuery {
+    Tweets {
+      id
+      ...TweetFragment
+    }
+  }
+`);
+```
+
+{@import ../generated-config/gql-tag-preset.md}
+
+## Getting Started
+
+In order to use this preset, you need to add the following configuration to your `codegen.yml`:
+
+```yml
+schema: src/path/to/your/schema.graphql
+documents:
+  - 'src/**/*.ts'
+  - '!src/gql/**/*'
+generates:
+  ./src/gql/:
+    preset: gql-tag-preset
+    plugins:
+      - gql-tag
+```
+
+It is also recommended, that you link `./src/gql` to `@app/gql`, so you can import your gql function easily from anywhere within your app.
+
+```bash
+yarn add -D @app/gql@link:./src/gql
+```
+
+Now start your codegen in watch mode via `yarn graphql-codegen --watch`.
+
+Create a new file within your `src` directory, e.g. `./src/index.ts` and add a query for your schema:
+
+```ts
+import { gql } from '@app/gql';
+
+// TweetsQuery is a fully typed document node/
+const TweetsQuery = gql(/* GraphQL */ `
+  query TweetsQuery {
+    Tweets {
+      id
+    }
+  }
+`);
+```
+
+Next we can simply add our GraphQL client of choice and use the typed document! Let's try urql!
+
+```tsx
+import { gql } from '@app/gql';
+import { useQuery } from 'urql';
+
+// TweetsQuery is a fully typed document node/
+const TweetsQuery = gql(/* GraphQL */ `
+  query TweetsQuery {
+    Tweets {
+      id
+      body
+    }
+  }
+`);
+
+const Tweets = () => {
+  const [result] = useQuery(TweetsQuery);
+  const { data, fetching, error } = result;
+
+  if (fetching) return <p>Loading...</p>;
+  if (error) return <p>Oh no... {error.message}</p>;
+
+  return (
+    <ul>
+      {/* data is fully typed 🎉 */}
+      {data.Tweets.map(tweet => (
+        <li key={tweet.id}>{tweet.body}</li>
+      ))}
+    </ul>
+  );
+};
+```

website/docs/presets/index.md

@@ -11,8 +11,9 @@ You can use and writes presets to tell codegen which output files to creates, an
 
 ## Available Presets
 
-| Name                  | Purpose                                                                       | Package Name & Docs                                                       |
-| --------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
-| `near-operation-file` | Generates operation code near the source file                                 | [`@graphql-codegen/near-operation-file-preset`](./near-operation-file.md) |
-| `import-types-`       | Allow you to separate base types declarations and the operations that uses it | [`@graphql-codegen/import-types-preset`](./import-types.md)               |
-| `graphql-modules`     | Generates types and resolvers signature for GraphQL-Modules                   | [`@graphql-codegen/graphql-modules-preset`](./graphql-modules.md)         |
+| Name                  | Purpose                                                                                                     | Package Name & Docs                                                       |
+| --------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| `near-operation-file` | Generates operation code near the source file                                                               | [`@graphql-codegen/near-operation-file-preset`](./near-operation-file.md) |
+| `gql-tag`             | Generate types for inline gql tag usages. Reduces import statement amount and the file count significantly. | [`@graphql-codegen/gql-tag-preset`](./gql-tag.md)                         |
+| `import-types-`       | Allow you to separate base types declarations and the operations that uses it                               | [`@graphql-codegen/import-types-preset`](./import-types.md)               |
+| `graphql-modules`     | Generates types and resolvers signature for GraphQL-Modules                                                 | [`@graphql-codegen/graphql-modules-preset`](./graphql-modules.md)         |

website/sidebars.js

@@ -90,6 +90,7 @@ module.exports = {
     ],
     Presets: [
       'presets/presets-index',
+      'presets/gql-tag',
       'presets/near-operation-file',
       'presets/import-types',
       'presets/graphql-modules',