GraphQL Explorer Plugin throwing error

[faizan-siddiqui]

I have added GraphQL Explorer Plugin, following the same steps in the readme here and the examples: https://github.com/graphql/graphiql/tree/main/packages/graphiql-plugin-explorer

The plugin button shows up but when i click it, i get this error: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

Is there anything I'm missing, has anyone else come across this?

[thomasheyenbrock]

Hey @faizan-siddiqui 👋 thanks for opening an issue! Can you give more context about the setup you're using? I copy-pasted the example from the readme into a Codesandbox but wasn't able to reproduce the issue: https://codesandbox.io/s/agitated-wright-m56pb2?file=/src/App.tsx

[tom-quiltt]

I have the same problem and I am using Next.js.

[jonathanawesome]

@tom-quiltt @faizan-siddiqui additional information about your setup or, even better, a running example would help with troubleshooting.

[AndKiel]

In my remix app, when I try to upgrade graphiql to v2 and use the explorer plugin, I get the following error/stack after clicking the button to open explorer:

useGivenContext@http://localhost:3000/build/_shared/chunk-6QWELR4S.js:675:60
ExplorerPlugin@http://localhost:3000/build/routes/explorer-GBKJ37U4.js:15383:23
renderWithHooks@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:13563:35
mountIndeterminateComponent@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:16292:21
beginWork@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:17247:22
beginWork$1@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:21048:22
performUnitOfWork@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20496:20
workLoopSync@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20432:30
renderRootSync@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20411:15
recoverFromConcurrentError@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20033:42
performSyncWorkOnRoot@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20175:28
flushSyncCallbacks@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:10576:30
node_modules/react-dom/cjs/react-dom.development.js/ensureRootIsScheduled/<@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:19924:21

I just did it now so I haven't investigated enough yet. If I have something more, I'll add info to this comment.

EDIT#1

Below are relevant snippets for my implementation:

// app/routes/explorer.tsx
// Remix route/page component.
export default function Explorer(): JSX.Element {
  // My GraphQL API has the introspection query disabled. 
  // In Remix loader I retrieve exposed `/schema.graphql` and `schemaText` is GraphQL SDL file contents.
  const { schemaText } = useLoaderData<ILoaderData>();

  return (
    // useState + useEffect helper component. It renders children only in the browser so that codemirror doesn't break SSR.
    <ClientOnly>
      <GraphiQLExplorer schemaText={schemaText} />
    </ClientOnly>
  );
}

import { useExplorerPlugin } from "@graphiql/plugin-explorer";
import { GraphiQL } from "graphiql";
import { buildSchema } from "graphql";
import { useState } from "react";

import { useSession } from "../authentication/hooks/useSession";

import { createFetcher } from "./helpers/createFetcher";

interface IGraphiQLExplorerProps {
  schemaText: string;
}

export function GraphiQLExplorer({ schemaText }: IGraphiQLExplorerProps): JSX.Element {
  // Custom hook for auth token
  const token = useSession();

  const [query, setQuery] = useState("");
  const [variables, setVariables] = useState("");
  const schema = buildSchema(schemaText);
  const explorerPlugin = useExplorerPlugin({ onEdit: setQuery, query, schema });

  function updateQuery(query = ""): void {
    setQuery(query);
  }

  function updateVariables(variables = ""): void {
    setVariables(variables);
  }

  return (
    // I have some CSS overrides.
    <div className="graphiql-container-wrap graphiql-container">
      <GraphiQL
        defaultEditorToolsVisibility="variables"
        // Custom fetcher that disables introspection because I'm passing built schema
        fetcher={createFetcher(token)}
        isHeadersEditorEnabled={false}
        onEditQuery={updateQuery}
        onEditVariables={updateVariables}
        plugins={[explorerPlugin]}
        query={query}
        schema={schema}
        variables={variables}
      >
      {/* Some custom buttons, not important. */}
      </GraphiQL>
    </div>
  );
}

Another issue with my implementation is that when I start typing the query, the caret keeps going back to the start, making the query editor unusable. :/

EDIT#2

Here's my code from before upgrade to v2 that works pretty much without issues:

import GraphiQL from "graphiql";
import { Explorer as GraphiQLExplorer } from "graphiql-explorer";
import graphiqlStyles from "graphiql/graphiql.css";
import { buildSchema } from "graphql";
import { useState } from "react";

import { useSession } from "../components/authentication/hooks/useSession";
import { createFetcher } from "../components/explorer/helpers/createFetcher";
import { ClientOnly } from "../components/utils/ClientOnly";

// Remix route/page component.
export default function Explorer(): JSX.Element {
  const { schemaText } = useLoaderData<ILoaderData>();
  const token = useSession();

  const [graphiQL, setGraphiQL] = useState<GraphiQL | null>(null);
  const [isExplorerOpen, setIsExplorerOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [variables, setVariables] = useState("");
  const schema = buildSchema(schemaText);

  function toggleExplorer(): void {
    setIsExplorerOpen(!isExplorerOpen);
  }

  function updateQuery(query = ""): void {
    setQuery(query);
  }

  function updateVariables(variables = ""): void {
    setVariables(variables);
  }

  return (
    <ClientOnly>
      <div className="graphiql-container-wrap graphiql-container">
        <GraphiQLExplorer
          explorerIsOpen={isExplorerOpen}
          onEdit={updateQuery}
          onRunOperation={() => graphiQL?.ref?.props.executionContext.run()}
          onToggleExplorer={toggleExplorer}
          query={query}
          schema={schema}
        />
        <GraphiQL
          defaultVariableEditorOpen={true}
          fetcher={createFetcher(token)}
          headerEditorEnabled={false}
          onEditQuery={updateQuery}
          onEditVariables={updateVariables}
          query={query}
          ref={ref => setGraphiQL(ref)}
          schema={schema}
          variables={variables}
        >
          <GraphiQL.Toolbar>
            <GraphiQL.Button label="Explorer" onClick={toggleExplorer} title="Toggle Explorer" />
            <GraphiQL.Button
              label="History"
              onClick={() => graphiQL?.ref?.props.historyContext?.toggle()}
              title="Toggle History"
            />
          </GraphiQL.Toolbar>
        </GraphiQL>
      </div>
    </ClientOnly>
  );
}

[wilhelmeek]

Fix for me was to make sure my versions of @graphiql/react and @graphiql/toolkit were up to date.

[AndKiel]

@wilhelmeek, thank you. For some unknown reason, I had @graphiql/react 1.0.0-next.2 in my package.json. Using the latest 0.x version fixed the crash for me too. No idea how it got there. 🤦🏻‍♂️

Now I only have to come up with why is my implementation broken when writing query (caret going back to the beginning).

[thomasheyenbrock]

Good shout @wilhelmeek! @faizan-siddiqui can you check which version of @graphiql/react you have installed?

[AndKiel]

My other issue was resolved by rewriting components to use GraphiQLProvider + GraphiQLInterface with useEditorContext. My mistake was trying to keep my own state management instead of relying on your context and query/variable editor.

[faizan-siddiqui]

I added "@graphiql/react": "^0.13.2" and "@graphiql/toolkit": "^0.8.0" to my dependencies in package.json and still get the same error :(

[faizan-siddiqui]

Full stack trace is

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at useEditorContext (bundle.js:24224)
    at ExplorerPlugin (bundle.js:22963)
    at renderWithHooks (bundle.js:113030)
    at mountIndeterminateComponent (bundle.js:116695)
    at beginWork (bundle.js:118163)
    at HTMLUnknownElement.callCallback (bundle.js:100826)
    at Object.invokeGuardedCallbackDev (bundle.js:100875)
    at invokeGuardedCallback (bundle.js:100937)
    at beginWork$1 (bundle.js:123950)
    at performUnitOfWork (bundle.js:123083)

[thomasheyenbrock]

@faizan-siddiqui can you share a snippet of your React code and details about the setup (Next.js, Vite, CRA, whatever you're using) so that we can dig into this? It's hard to investigate without a reproduction.

[faizan-siddiqui]

Hi @thomasheyenbrock thanks for having a look, yep i was able to replicate the problem here, I suspect it's something in my package.json that is conflicting, as I used almost the same sandbox as the one you linked but put in the dependencies I am using https://codesandbox.io/s/little-bird-23lulc

[faizan-siddiqui]

looks like i found the problem, I was using "graphiql": "2.0.3", I changed it to "graphiql": "2.0.7" and it's working now, I tested removing "@graphiql/react": "^0.13.2" and "@graphiql/toolkit": "^0.8.0" and it's still working now , thanks heaps everyone!

[faizan-siddiqui]

Seems to work for me now, the issue was I was using "graphiql": "2.0.3" instead of "graphiql": "2.0.7"

[eMerzh]

hey i got the same issue with graphiql 2.2.0.... if you https://codesandbox.io/s/agitated-wright-m56pb2?file=/package.json and change graphiql to 2.2.0, then click on explorer icon you'll have

[thomasheyenbrock]

@eMerzh if you also upgrade @graphiql/plugin-explorer to the latest version (which is 0.1.12) then it should work

[hugh-onf]

Hey, so it happens again on latest 0.1.20 but basically ALL versions after/except the 0.1.12 as @thomasheyenbrock has mentioned above, are having the same issues. For the context, I am running this inside a Storybook but the error is the same as everyone else. Thanks.

[thomasheyenbrock]

@hugh-onf can you share a reproduction? Are you using the latest versions of all GraphiQL related packages?

[hugh-onf]

@thomasheyenbrock thanks and indeed I was using an older [email protected] but after updating it to the latest 2.4.7 it seems all working together now.