Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rohit-gohri/2a508c0dddaaff6c7bfbe4a855ccb500 to your computer and use it in GitHub Desktop.
Save rohit-gohri/2a508c0dddaaff6c7bfbe4a855ccb500 to your computer and use it in GitHub Desktop.
graphql-codegen-apollo-next-ssr "same-file" patch for PR: https://github.com/correttojs/graphql-codegen-apollo-next-ssr/pull/292
diff --git a/build/src/index.js b/build/src/index.js
index 7a3e8db5bc97f3786dc14bf8555721545534a952..00ef3fed50aeb28377b94ee43d1b068bbe82f57a 100644
--- a/build/src/index.js
+++ b/build/src/index.js
@@ -37,7 +37,7 @@ const plugin = (schema, documents, config) => {
exports.plugin = plugin;
const validate = (schema, documents, config, outputFile) => __awaiter(void 0, void 0, void 0, function* () {
if ((0, path_1.extname)(outputFile) !== ".tsx") {
- throw new Error(`Plugin "react-apollo" requires extension to be ".tsx"!`);
+ throw new Error(`Plugin "apollo-next-ssr" requires extension to be ".tsx"!`);
}
});
exports.validate = validate;
diff --git a/build/src/visitor.js b/build/src/visitor.js
index 4d54ec005b49f6e5227707bda340340116827b87..7777909ed08a8bb0b51f48dd07d9b8ddc562af38 100644
--- a/build/src/visitor.js
+++ b/build/src/visitor.js
@@ -46,8 +46,12 @@ class ApolloNextSSRVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor
if (this.config.withHOC) {
this.imports.add(`import { NextPage } from 'next';`);
}
- this.imports.add(`import { NextRouter, useRouter } from 'next/router'`);
- this.imports.add(`import { QueryHookOptions, useQuery } from '${this.config.apolloReactHooksImportFrom}';`);
+ if (this.config.withHOC || this.config.withHooks) {
+ this.imports.add(`import { NextRouter, useRouter } from 'next/router'`);
+ }
+ if (this.config.withHOC || this.config.withHooks) {
+ this.imports.add(`import { QueryHookOptions, useQuery } from '${this.config.apolloReactHooksImportFrom}';`);
+ }
this.imports.add(`import * as Apollo from '${this.config.apolloImportFrom}';`);
this.imports.add(this.config.reactImport);
if (this.config.apolloClientInstanceImport) {
@@ -59,7 +63,10 @@ class ApolloNextSSRVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor
if (this.config.customImports) {
this.imports.add(this.config.customImports);
}
- const baseImports = super.getImports();
+ let baseImports = super.getImports();
+ if (this.config.importDocumentNodeExternallyFrom === 'same-file') {
+ baseImports = baseImports.filter(importStr => !importStr.startsWith('import * as Operations from '));
+ }
const hasOperations = this._collectedOperations.length > 0;
if (!hasOperations) {
return baseImports;
@@ -67,7 +74,7 @@ class ApolloNextSSRVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor
return [...baseImports, ...Array.from(this.imports)];
}
getDocumentNodeVariable(documentVariableName) {
- return this.config.documentMode === visitor_plugin_common_1.DocumentMode.external
+ return this.config.documentMode === visitor_plugin_common_1.DocumentMode.external && this.config.importDocumentNodeExternallyFrom !== 'same-file'
? `Operations.${documentVariableName}`
: documentVariableName;
}
diff --git a/src/config.ts b/src/config.ts
index 7e3895f9bfb331276b5bf120e2117abae59e66a3..b7fc84dc6abb2eb40a233a43e5a8fe845fb54583 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -5,7 +5,7 @@ import { RawClientSideBasePluginConfig } from "@graphql-codegen/visitor-plugin-c
*
* It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.
*/
-export type ApolloNextSSRRawPluginConfig = RawClientSideBasePluginConfig &
+export type ApolloNextSSRRawPluginConfig = Omit<RawClientSideBasePluginConfig, 'importDocumentNodeExternallyFrom'> &
Config;
export type Config = {
@@ -142,4 +142,32 @@ export type Config = {
* @description Custom React import
*/
reactImport?: string;
+
+ /**
+ * @default ""
+ * @description This config should be used if `documentMode` is `external`. This has 3 usage:
+ * - any string: This would be the path to import document nodes from. This can be used if we want to manually create the document nodes e.g. Use `graphql-tag` in a separate file and export the generated document
+ * - 'near-operation-file': This is a special mode that is intended to be used with `near-operation-file` preset to import document nodes from those files. If these files are `.graphql` files, we make use of webpack loader.
+ * - 'same-file': This is a special mode that is intended to be used with the `typescript-operations` & `typescript-react-apollo` plugins to generate document nodes in the same files.
+ *
+ * @exampleMarkdown
+ * ```yml
+ * config:
+ * documentMode: external
+ * importDocumentNodeExternallyFrom: path/to/document-node-file
+ * ```
+ *
+ * ```yml
+ * config:
+ * documentMode: external
+ * importDocumentNodeExternallyFrom: near-operation-file
+ * ```
+ *
+ * ```yml
+ * config:
+ * documentMode: external
+ * importDocumentNodeExternallyFrom: same-file
+ * ```
+ */
+ importDocumentNodeExternallyFrom?: string;
};
diff --git a/src/index.ts b/src/index.ts
index 34d937dc38f88879f102472c00d26c8f0902352e..20b3a853ad55868322ddcac68de8b6febcbecde1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -63,7 +63,7 @@ export const validate: PluginValidateFn<any> = async (
outputFile: string
) => {
if (extname(outputFile) !== ".tsx") {
- throw new Error(`Plugin "react-apollo" requires extension to be ".tsx"!`);
+ throw new Error(`Plugin "apollo-next-ssr" requires extension to be ".tsx"!`);
}
};
diff --git a/src/visitor.ts b/src/visitor.ts
index 79e4374db24e17392330d379c8a0171900bf68d4..47667fad06d67d3381c91580b3709f6f4ea2fd36 100644
--- a/src/visitor.ts
+++ b/src/visitor.ts
@@ -4,7 +4,6 @@ import {
ClientSideBasePluginConfig,
getConfigValue,
LoadedFragment,
- OMIT_TYPE,
DocumentMode,
} from "@graphql-codegen/visitor-plugin-common";
@@ -96,11 +95,15 @@ export class ApolloNextSSRVisitor extends ClientSideBaseVisitor<
if (this.config.withHOC) {
this.imports.add(`import { NextPage } from 'next';`);
}
- this.imports.add(`import { NextRouter, useRouter } from 'next/router'`);
+ if (this.config.withHOC || this.config.withHooks) {
+ this.imports.add(`import { NextRouter, useRouter } from 'next/router'`);
+ }
+ if (this.config.withHOC || this.config.withHooks) {
+ this.imports.add(
+ `import { QueryHookOptions, useQuery } from '${this.config.apolloReactHooksImportFrom}';`
+ );
+ }
- this.imports.add(
- `import { QueryHookOptions, useQuery } from '${this.config.apolloReactHooksImportFrom}';`
- );
this.imports.add(
`import * as Apollo from '${this.config.apolloImportFrom}';`
);
@@ -120,7 +123,11 @@ export class ApolloNextSSRVisitor extends ClientSideBaseVisitor<
this.imports.add(this.config.customImports);
}
- const baseImports = super.getImports();
+ let baseImports = super.getImports();
+ if (this.config.importDocumentNodeExternallyFrom === 'same-file') {
+ baseImports = baseImports.filter(importStr => !importStr.startsWith('import * as Operations from '))
+ }
+
const hasOperations = this._collectedOperations.length > 0;
if (!hasOperations) {
@@ -131,7 +138,7 @@ export class ApolloNextSSRVisitor extends ClientSideBaseVisitor<
}
private getDocumentNodeVariable(documentVariableName: string): string {
- return this.config.documentMode === DocumentMode.external
+ return this.config.documentMode === DocumentMode.external && this.config.importDocumentNodeExternallyFrom !== 'same-file'
? `Operations.${documentVariableName}`
: documentVariableName;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment