graphql-request: support emitLegacyCommonJSImports: false (#8334)

.changeset/sweet-comics-scream.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-graphql-request': patch
+---
+
+graphql-request: append explicit extension when importing dom types

packages/plugins/typescript/graphql-request/src/visitor.ts

@@ -41,9 +41,10 @@ export class GraphQLRequestVisitor extends ClientSideBaseVisitor<
     autoBind(this);
 
     const typeImport = this.config.useTypeImports ? 'import type' : 'import';
+    const fileExtension = this.config.emitLegacyCommonJSImports ? '' : '.js';
 
     this._additionalImports.push(`${typeImport} { GraphQLClient } from 'graphql-request';`);
-    this._additionalImports.push(`${typeImport} * as Dom from 'graphql-request/dist/types.dom';`);
+    this._additionalImports.push(`${typeImport} * as Dom from 'graphql-request/dist/types.dom${fileExtension}';`);
 
     if (this.config.rawRequest && this.config.documentMode !== DocumentMode.string) {
       this._additionalImports.push(`import { print } from 'graphql'`);

packages/plugins/typescript/graphql-request/tests/__snapshots__/graphql-request.spec.ts.snap

@@ -1126,6 +1126,286 @@ async function test() {
 }"
 `;
 
+exports[`graphql-request sdk Should support emitLegacyCommonJSImports: false by emitting imports with extensions 1`] = `
+"export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+import { GraphQLClient } from 'graphql-request';
+import * as Dom from 'graphql-request/dist/types.dom.js';
+import gql from 'graphql-tag';
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
+
+export type Query = {
+  __typename?: 'Query';
+  /** A feed of repository submissions */
+  feed?: Maybe<Array<Maybe<Entry>>>;
+  /** A single entry */
+  entry?: Maybe<Entry>;
+  /** Return the currently logged in user, or null if nobody is logged in */
+  currentUser?: Maybe<User>;
+};
+
+
+export type QueryFeedArgs = {
+  type: FeedType;
+  offset?: InputMaybe<Scalars['Int']>;
+  limit?: InputMaybe<Scalars['Int']>;
+};
+
+
+export type QueryEntryArgs = {
+  repoFullName: Scalars['String'];
+};
+
+/** A list of options for the sort order of the feed */
+export enum FeedType {
+  /** Sort by a combination of freshness and score, using Reddit's algorithm */
+  Hot = 'HOT',
+  /** Newest entries first */
+  New = 'NEW',
+  /** Highest score entries first */
+  Top = 'TOP'
+}
+
+/** Information about a GitHub repository submitted to GitHunt */
+export type Entry = {
+  __typename?: 'Entry';
+  /** Information about the repository from GitHub */
+  repository: Repository;
+  /** The GitHub user who submitted this entry */
+  postedBy: User;
+  /** A timestamp of when the entry was submitted */
+  createdAt: Scalars['Float'];
+  /** The score of this repository, upvotes - downvotes */
+  score: Scalars['Int'];
+  /** The hot score of this repository */
+  hotScore: Scalars['Float'];
+  /** Comments posted about this repository */
+  comments: Array<Maybe<Comment>>;
+  /** The number of comments posted about this repository */
+  commentCount: Scalars['Int'];
+  /** The SQL ID of this entry */
+  id: Scalars['Int'];
+  /** XXX to be changed */
+  vote: Vote;
+};
+
+
+/** Information about a GitHub repository submitted to GitHunt */
+export type EntryCommentsArgs = {
+  limit?: InputMaybe<Scalars['Int']>;
+  offset?: InputMaybe<Scalars['Int']>;
+};
+
+/**
+ * A repository object from the GitHub API. This uses the exact field names returned by the
+ * GitHub API for simplicity, even though the convention for GraphQL is usually to camel case.
+ */
+export type Repository = {
+  __typename?: 'Repository';
+  /** Just the name of the repository, e.g. GitHunt-API */
+  name: Scalars['String'];
+  /** The full name of the repository with the username, e.g. apollostack/GitHunt-API */
+  full_name: Scalars['String'];
+  /** The description of the repository */
+  description?: Maybe<Scalars['String']>;
+  /** The link to the repository on GitHub */
+  html_url: Scalars['String'];
+  /** The number of people who have starred this repository on GitHub */
+  stargazers_count: Scalars['Int'];
+  /** The number of open issues on this repository on GitHub */
+  open_issues_count?: Maybe<Scalars['Int']>;
+  /** The owner of this repository on GitHub, e.g. apollostack */
+  owner?: Maybe<User>;
+};
+
+/** A user object from the GitHub API. This uses the exact field names returned from the GitHub API. */
+export type User = {
+  __typename?: 'User';
+  /** The name of the user, e.g. apollostack */
+  login: Scalars['String'];
+  /** The URL to a directly embeddable image for this user's avatar */
+  avatar_url: Scalars['String'];
+  /** The URL of this user's GitHub page */
+  html_url: Scalars['String'];
+};
+
+/** A comment about an entry, submitted by a user */
+export type Comment = {
+  __typename?: 'Comment';
+  /** The SQL ID of this entry */
+  id: Scalars['Int'];
+  /** The GitHub user who posted the comment */
+  postedBy: User;
+  /** A timestamp of when the comment was posted */
+  createdAt: Scalars['Float'];
+  /** The text of the comment */
+  content: Scalars['String'];
+  /** The repository which this comment is about */
+  repoName: Scalars['String'];
+};
+
+/** XXX to be removed */
+export type Vote = {
+  __typename?: 'Vote';
+  vote_value: Scalars['Int'];
+};
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  /** Submit a new repository, returns the new submission */
+  submitRepository?: Maybe<Entry>;
+  /** Vote on a repository submission, returns the submission that was voted on */
+  vote?: Maybe<Entry>;
+  /** Comment on a repository, returns the new comment */
+  submitComment?: Maybe<Comment>;
+};
+
+
+export type MutationSubmitRepositoryArgs = {
+  repoFullName: Scalars['String'];
+};
+
+
+export type MutationVoteArgs = {
+  repoFullName: Scalars['String'];
+  type: VoteType;
+};
+
+
+export type MutationSubmitCommentArgs = {
+  repoFullName: Scalars['String'];
+  commentContent: Scalars['String'];
+};
+
+/** The type of vote to record, when submitting a vote */
+export enum VoteType {
+  Up = 'UP',
+  Down = 'DOWN',
+  Cancel = 'CANCEL'
+}
+
+export type Subscription = {
+  __typename?: 'Subscription';
+  /** Subscription fires on every comment added */
+  commentAdded?: Maybe<Comment>;
+};
+
+
+export type SubscriptionCommentAddedArgs = {
+  repoFullName: Scalars['String'];
+};
+export type FeedQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type FeedQuery = { __typename?: 'Query', feed?: Array<{ __typename?: 'Entry', id: number, commentCount: number, repository: { __typename?: 'Repository', owner?: { __typename?: 'User', avatar_url: string } | null } } | null> | null };
+
+export type Feed2QueryVariables = Exact<{
+  v: Scalars['String'];
+}>;
+
+
+export type Feed2Query = { __typename?: 'Query', feed?: Array<{ __typename?: 'Entry', id: number } | null> | null };
+
+export type Feed3QueryVariables = Exact<{
+  v?: InputMaybe<Scalars['String']>;
+}>;
+
+
+export type Feed3Query = { __typename?: 'Query', feed?: Array<{ __typename?: 'Entry', id: number } | null> | null };
+
+export type Feed4QueryVariables = Exact<{
+  v?: Scalars['String'];
+}>;
+
+
+export type Feed4Query = { __typename?: 'Query', feed?: Array<{ __typename?: 'Entry', id: number } | null> | null };
+
+export const FeedDocument = gql\`
+    query feed {
+  feed {
+    id
+    commentCount
+    repository {
+      owner {
+        avatar_url
+      }
+    }
+  }
+}
+    \`;
+export const Feed2Document = gql\`
+    query feed2($v: String!) {
+  feed {
+    id
+  }
+}
+    \`;
+export const Feed3Document = gql\`
+    query feed3($v: String) {
+  feed {
+    id
+  }
+}
+    \`;
+export const Feed4Document = gql\`
+    query feed4($v: String! = "TEST") {
+  feed {
+    id
+  }
+}
+    \`;
+
+export type SdkFunctionWrapper = <T>(action: (requestHeaders?:Record<string, string>) => Promise<T>, operationName: string, operationType?: string) => Promise<T>;
+
+
+const defaultWrapper: SdkFunctionWrapper = (action, _operationName, _operationType) => action();
+
+export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper = defaultWrapper) {
+  return {
+    feed(variables?: FeedQueryVariables, requestHeaders?: Dom.RequestInit["headers"]): Promise<FeedQuery> {
+      return withWrapper((wrappedRequestHeaders) => client.request<FeedQuery>(FeedDocument, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'feed', 'query');
+    },
+    feed2(variables: Feed2QueryVariables, requestHeaders?: Dom.RequestInit["headers"]): Promise<Feed2Query> {
+      return withWrapper((wrappedRequestHeaders) => client.request<Feed2Query>(Feed2Document, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'feed2', 'query');
+    },
+    feed3(variables?: Feed3QueryVariables, requestHeaders?: Dom.RequestInit["headers"]): Promise<Feed3Query> {
+      return withWrapper((wrappedRequestHeaders) => client.request<Feed3Query>(Feed3Document, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'feed3', 'query');
+    },
+    feed4(variables?: Feed4QueryVariables, requestHeaders?: Dom.RequestInit["headers"]): Promise<Feed4Query> {
+      return withWrapper((wrappedRequestHeaders) => client.request<Feed4Query>(Feed4Document, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'feed4', 'query');
+    }
+  };
+}
+export type Sdk = ReturnType<typeof getSdk>;
+async function test() {
+  const Client = require('graphql-request').GraphQLClient;
+  const client = new Client('');
+  const sdk = getSdk(client);
+
+  await sdk.feed();
+  await sdk.feed3();
+  await sdk.feed4();
+
+  const result = await sdk.feed2({ v: "1" });
+
+  if (result.feed) {
+    if (result.feed[0]) {
+      const id = result.feed[0].id
+    }
+  }
+}"
+`;
+
 exports[`graphql-request sdk Should support extensionType when rawRequest is true and documentMode = "DocumentNode" 1`] = `
 "export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;

packages/plugins/typescript/graphql-request/tests/graphql-request.spec.ts

@@ -177,6 +177,36 @@ async function test() {
 
   const result = await sdk.feed2({ v: "1" });
 
+  if (result.feed) {
+    if (result.feed[0]) {
+      const id = result.feed[0].id
+    }
+  }
+}`;
+      const output = await validate(result, config, docs, schema, usage);
+
+      expect(output).toMatchSnapshot();
+    });
+
+    it('Should support emitLegacyCommonJSImports: false by emitting imports with extensions', async () => {
+      const config = { emitLegacyCommonJSImports: false };
+      const docs = [{ location: '', document: basicDoc }];
+      const result = (await plugin(schema, docs, config, {
+        outputFile: 'graphql.ts',
+      })) as Types.ComplexPluginOutput;
+
+      const usage = `
+async function test() {
+  const Client = require('graphql-request').GraphQLClient;
+  const client = new Client('');
+  const sdk = getSdk(client);
+
+  await sdk.feed();
+  await sdk.feed3();
+  await sdk.feed4();
+
+  const result = await sdk.feed2({ v: "1" });
+
   if (result.feed) {
     if (result.feed[0]) {
       const id = result.feed[0].id