Lets go

Author: ardatan

examples/nextjs-app/__integration-tests__/nextjs-app.spec.ts

@@ -25,7 +25,7 @@ describe('nextjs 13 App Router', () => {
     });
 
     expect(response.ok).toBe(true);
-    expect(await response.text()).toContain('<title>Yoga GraphiQL</title>');
+    expect(await response.text()).toContain('Yoga GraphiQL');
   });
 
   it('should run basic query', async () => {

packages/graphiql/package.json

@@ -41,8 +41,7 @@
     "json-bigint-patch": "0.0.8",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "tslib": "2.8.1",
-    "use-url-search-params": "2.5.1"
+    "tslib": "2.8.1"
   },
   "devDependencies": {
     "@types/react": "19.1.8",

packages/graphiql/src/YogaGraphiQL.tsx

@@ -7,7 +7,6 @@ import { Fetcher, FetcherOpts, FetcherParams } from '@graphiql/toolkit';
 import { LoadFromUrlOptions, SubscriptionProtocol, UrlLoader } from '@graphql-tools/url-loader';
 import 'json-bigint-patch';
 import React, { useMemo } from 'react';
-import { useUrlSearchParams } from 'use-url-search-params';
 import { YogaLogo } from './YogaLogo';
 import './styles.css';
 
@@ -81,10 +80,6 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
 
   const endpoint = new URL(props.endpoint ?? location.pathname, location.href).toString();
 
-  const type = {
-    query: String,
-  };
-
   const urlLoader = useMemo(() => new UrlLoader(), []);
 
   const fetcher = useMemo(() => {
@@ -126,14 +121,6 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
     };
   }, [urlLoader, endpoint, props.fetcher]) as Fetcher;
 
-  const [params, setParams] = useUrlSearchParams(
-    {
-      query: props.defaultQuery || initialQuery,
-    },
-    type,
-    false,
-  );
-
   const explorer = explorerPlugin({
     showAttribution: true,
   });
@@ -148,13 +135,7 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
         inputValueDeprecation={true}
         isHeadersEditorEnabled
         defaultEditorToolsVisibility
-        initialQuery={params['query']?.toString()}
-        onEditQuery={(query, ast) => {
-          setParams({
-            query,
-          });
-          props.onEditQuery?.(query, ast);
-        }}
+        initialQuery={initialQuery}
         {...props}
         fetcher={fetcher}
       >

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

@@ -277,8 +277,10 @@ describe('browser', () => {
         },
         log(name, severity, message, args, hints) {
           if (severity === 'error') {
+            // eslint-disable-next-line no-console
             console.error(wrapColor(`[${name}] ${message}`, hints.color), ...args);
           } else {
+            // eslint-disable-next-line no-console
             console.log(wrapColor(`[${name}] ${message}`), ...args);
           }
         },
@@ -307,28 +309,27 @@ describe('browser', () => {
   });
 
   const typeOperationText = async (text: string) => {
-    await page.type('.graphiql-query-editor .CodeMirror textarea', text, { delay: 300 });
+    await page.type('.graphiql-editor textarea', text, { delay: 300 });
     // TODO: figure out how we can avoid this wait
     // it is very likely that there is a delay from textarea -> react state update
     await setTimeout$(300);
   };
 
   const typeVariablesText = async (text: string) => {
-    await page.type('[aria-label="Variables"] .CodeMirror textarea', text, { delay: 100 });
+    await page.type('[data-uri="file:///ro-variables.json"] textarea', text, { delay: 100 });
     // TODO: figure out how we can avoid this wait
     // it is very likely that there is a delay from textarea -> react state update
     await setTimeout$(100);
   };
 
   const waitForResult = async (): Promise<object> => {
-    await page.waitForSelector('.graphiql-response .CodeMirror-code');
+    await page.waitForSelector('.result-window textarea');
     await page.waitForFunction(
-      () =>
-        !!window.document.querySelector('.graphiql-response .CodeMirror-code')?.textContent?.trim(),
+      () => !!window.document.querySelector('.result-window textarea')?.textContent?.trim(),
     );
     const resultContents = await page.evaluate(() => {
       return window.document
-        .querySelector('.graphiql-response .CodeMirror-code')
+        .querySelector('.result-window textarea')
         ?.textContent?.trim()
         .replaceAll('\u00A0', ' ');
     });