[graphiql] fix types to allow overriding endpoint option (#3727)

* [graphiql] fix types to allow overriding `endpoint` option

* changeset

* Add tests

* fix test name

---------

Co-authored-by: Arda TANRIKULU <ardatanrikulu@gmail.com>

.changeset/fresh-penguins-drum.md

@@ -0,0 +1,5 @@
+---
+'graphql-yoga': minor
+---
+
+Allow to configure the endpoint used by GraphiQL to send requests.

packages/graphql-yoga/__integration-tests__/browser.spec.ts

@@ -22,7 +22,7 @@ import { setTimeout as setTimeout$ } from 'node:timers/promises';
 // eslint-disable-next-line
 import { Browser, chromium, ElementHandle, Page } from 'playwright';
 import { fakePromise } from '@whatwg-node/server';
-import { CORSOptions, createYoga, Repeater } from '../src/index.js';
+import { CORSOptions, createSchema, createYoga, GraphiQLOptions, Repeater } from '../src/index.js';
 
 let resolveOnReturn: VoidFunction;
 const timeoutsSignal = new AbortController();
@@ -226,9 +226,11 @@ describe('browser', () => {
   const liveQueryStore = new InMemoryLiveQueryStore();
   const endpoint = '/test-graphql';
   let cors: CORSOptions = {};
+  let graphiqlOptions: GraphiQLOptions | undefined;
   const yogaApp = createYoga({
     schema: createTestSchema(),
     cors: () => cors,
+    graphiql: () => graphiqlOptions || true,
     logging: false,
     graphqlEndpoint: endpoint,
     plugins: [
@@ -724,4 +726,51 @@ describe('browser', () => {
       `);
     });
   });
+
+  let anotherServer: Server;
+  afterAll(async () => {
+    if (anotherServer) {
+      await new Promise<void>((resolve, reject) =>
+        anotherServer.close(err => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve();
+          }
+        }),
+      );
+    }
+  });
+  test('`endpoint` configures GraphiQL to point another server', async () => {
+    const anotherYoga = createYoga({
+      schema: createSchema({
+        typeDefs: /* GraphQL */ `
+          type Query {
+            greetings: String!
+          }
+        `,
+        resolvers: {
+          Query: {
+            greetings: () => 'Hello from another server',
+          },
+        },
+      }),
+    });
+    anotherServer = createServer(anotherYoga);
+    await new Promise<void>(resolve => anotherServer.listen(0, resolve));
+    const anotherPort = (anotherServer.address() as AddressInfo).port;
+    const anotherEndpoint = `http://localhost:${anotherPort}/graphql`;
+    graphiqlOptions = {
+      endpoint: anotherEndpoint,
+    };
+    await page.goto(`http://localhost:${port}${endpoint}`);
+    await page.waitForSelector('.graphiql-query-editor .CodeMirror textarea');
+    await typeOperationText('{ greetings }');
+    await page.click(playButtonSelector);
+    await expect(waitForResult()).resolves.toEqual({
+      data: {
+        greetings: 'Hello from another server',
+      },
+    });
+  });
 });

packages/graphql-yoga/src/plugins/use-graphiql.ts

@@ -118,16 +118,19 @@ export type GraphiQLOptions = {
    * Retry attempts
    */
   retry?: number;
-};
-
-export type GraphiQLRendererOptions = {
   /**
-   * The endpoint requests should be sent. Defaults to `"/graphql"`.
+   * The endpoint requests should be sent.
+   * Defaults to the graphql endpoint ("/graphql" by default).
    */
   endpoint?: string;
-} & GraphiQLOptions;
+};
+
+/**
+ * @deprecated replaced by GraphiQLOptions
+ */
+export type GraphiQLRendererOptions = GraphiQLOptions;
 
-export const renderGraphiQL = (opts: GraphiQLRendererOptions) =>
+export const renderGraphiQL = (opts: GraphiQLOptions) =>
   graphiqlHTML
     .replace('__TITLE__', opts?.title || 'Yoga GraphiQL')
     .replace('__OPTS__', JSON.stringify(opts ?? {}));
@@ -148,7 +151,7 @@ export type GraphiQLOptionsOrFactory<TServerContext> =
 export interface GraphiQLPluginConfig<TServerContext> {
   graphqlEndpoint: string;
   options?: GraphiQLOptionsOrFactory<TServerContext>;
-  render?(options: GraphiQLRendererOptions): PromiseOrValue<BodyInit>;
+  render?(options: GraphiQLOptions): PromiseOrValue<BodyInit>;
   logger?: YogaLogger;
 }