feat: Add url details and copy to cURL button by jerelmiller · Pull Request #4220 · graphql/graphiql

jerelmiller · 2026-05-01T06:17:20Z

Part of #3951

Adds a new URL bar that shows the GraphQL server URL along with a "Copy cURL" button.

Since this is my first PR, design suggestions welcome! I've added review comments to point out various details about this PR.

Screenshot

changeset-bot · 2026-05-01T06:17:25Z

⚠️ No Changeset found

Latest commit: 7cf27f4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

jerelmiller · 2026-05-01T06:22:09Z

    return httpFetcher(graphQLParams, fetcherOpts);
  };
+
+  return Object.assign(fetcher, { [FETCHER_OPTIONS_SYMBOL]: options });


We don't have a great way to access options provided to the fetcher since all the GraphiQL component sees is a function. I went with a symbol approach which lets us read those values in the component without the need for additional props.

That said, are there situations where this function isn't used? I hide the new UI when we can't detect these options on the fetcher function, but I'm wondering if we need to have some sort of prop on GraphiQL itself as replacement in case custom implementations provide fetchers that don't use this function.

I'm open to other ideas for sharing this information, but this was the best I could think of without introducing a breaking change.

This seems reasonable to me. I would say maybe just leave as-is, and if there's a good place to document the limitation that'd be good.

Great! That should be enough for me to write a changeset and add additional documentation. Thanks!

jerelmiller · 2026-05-01T06:23:09Z

@@ -0,0 +1,26 @@
+.url-details {


Design suggestions welcome!

jerelmiller · 2026-05-01T06:26:53Z

+      variableEditor?.getValue(),
+    );
+
+    const headers: Record<string, string> = {


GraphQL Playground adds a whole lot more header values than I've included here, but I chose to keep this minimal for now. Let me know if we should include more.

jerelmiller · 2026-05-01T06:27:45Z

-                  className="graphiql-tab-add"
-                  onClick={addTab}
-                  aria-label={LABEL.newTab}
+          <div className="graphiql-main-container">


The "Hide whitespace" setting is recommended while reviewing this component.

trevor-scheer · 2026-05-04T18:23:42Z

Not a strong opinion here (and I think your placement is reasonable given playground's), but I'd imagined this as a button alongside the others in the editor (near prettify, etc.). Any preference between the two options?

jerelmiller · 2026-05-04T21:57:42Z

I thought about that too, though I struggled to figure out a good icon to use that would convey what it does, so I took the easy way out 😅. I didn't want it confused with the copy query button. Any ideas on what icon makes sense I moved it with the others?

trevor-scheer · 2026-05-05T01:59:41Z

  DOC_EXPLORER_PLUGIN,
 } from '@graphiql/plugin-doc-explorer';
 import { GraphiQLLogo, GraphiQLToolbar, GraphiQLFooter, Sidebar } from './ui';
+import { FETCHER_OPTIONS_SYMBOL } from '@graphiql/toolkit';


Build is failing because toolkit is listed as a dev dependency which is actually pretty surprising to me. I'm curious if that was an intentional decision. Maybe @dimaMachina knows more.

trevor-scheer · 2026-05-05T19:38:45Z

@jerelmiller how about a terminal icon?
https://www.svgrepo.com/svg/511163/terminal

jerelmiller · 2026-05-05T21:05:48Z

That works for me! I'll try and push an update tonight to try moving that button over. Thanks for the suggestion!

trevor-scheer · 2026-05-06T19:22:00Z

FYI this'll need a rebase against main due to #4203 and making the new/renamed Lint check required.

jerelmiller · 2026-05-07T06:06:49Z

@trevor-scheer got those updates in place! I've added some new comments as followup questions as well that I'd love some input on. Thanks for the reviews thus far!

jerelmiller · 2026-05-07T06:11:07Z

+  /**
+   * The GraphQL server url
+   */
+  url?: string;


Should this be called fetcherUrl, or is url enough?

No strong feelings, both seem reasonable. I haven't thought of another relevant URL that this needs to be disambiguated from, but I also haven't thought too hard about it :smiling:

jerelmiller · 2026-05-07T06:13:50Z

+  const copyAsCurl = (
+    <ToolbarButton
+      label="Copy as cURL"
+      disabled={!url}


I opted to disable the button when the url is not available. Should we hide the component altogether instead?

I like disabling. It'd be nice to explain why in the tooltip but might be a bit verbose, so I'm on the fence.

I'd say leave as is (and if you come up with some very concise copy for the disabled state, open to that).

trevor-scheer

Looks pretty good, a couple important comments to address within. Still needs a changeset as well. Thanks!

trevor-scheer · 2026-05-16T14:06:27Z

+        operationName,
+      });
+
+      const command = `curl '${url}' ${headersString} --data-binary '${data}'`;


I think we need to escape single quotes here. I'd extract this bit of the function:
toCurl(url, headers, data): string so we can easily unit test it.

trevor-scheer · 2026-05-16T14:09:02Z

+      let operationName: string | undefined;
+
+      if (query) {
+        const definition = parse(query).definitions.find(


This can throw, and I think we have a couple options...

on query update enable/disable the copy as curl button

show something in the UI

just log to console

do nothing

Thoughts? 1 seems nice but maybe a bit heavy.

trevor-scheer · 2026-05-16T14:11:10Z

+  const copyAsCurl = (
+    <ToolbarButton
+      label="Copy as cURL"
+      disabled={!url}


I like disabling. It'd be nice to explain why in the tooltip but might be a bit verbose, so I'm on the fence.

I'd say leave as is (and if you come up with some very concise copy for the disabled state, open to that).

trevor-scheer · 2026-05-16T14:12:13Z

+  /**
+   * The GraphQL server url
+   */
+  url?: string;


No strong feelings, both seem reasonable. I haven't thought of another relevant URL that this needs to be disambiguated from, but I also haven't thought too hard about it :smiling:

jerelmiller commented May 1, 2026

View reviewed changes

trevor-scheer self-requested a review May 4, 2026 18:13

trevor-scheer reviewed May 5, 2026

View reviewed changes

jerelmiller added 5 commits May 6, 2026 23:19

feat: Add url details and copy to cURL button

98d29d2

Use graphql-response+json accept header

ebc5a0e

Use cn utility

6b4f272

Add type keyword

deed48c

Move css import as last statement

5097524

jerelmiller force-pushed the jerel/copy-as-curl branch from 4f28e28 to 5097524 Compare May 7, 2026 05:19

jerelmiller added 6 commits May 6, 2026 23:23

Add terminal icon

a00e218

Move @graphiql/toolkit to dependency

ba6d40c

Add copyAsCurl button to toolbar

6a84170

Fix color of terminal icon

129705b

Disable Copy as cURL button when url is not set

59cb955

Remove copy curl button from header

36ba286

jerelmiller added 3 commits May 7, 2026 00:08

Remove unused functions

fa354bc

Inline fetcherOpts to getFetcherUrl

8ccfeb3

Pull fetcher url from the store

12250de

jerelmiller commented May 7, 2026

View reviewed changes

Remove more unused imports

cee8bdd

Move @graphiql/toolkit back as dev dependency

0aec16e

jerelmiller commented May 7, 2026

View reviewed changes

Format terminal svg

7cf27f4

trevor-scheer requested changes May 16, 2026

View reviewed changes

Conversation

jerelmiller commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

jerelmiller May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

trevor-scheer commented May 4, 2026

Uh oh!

jerelmiller commented May 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

trevor-scheer commented May 5, 2026

Uh oh!

jerelmiller commented May 5, 2026

Uh oh!

trevor-scheer commented May 6, 2026

Uh oh!

jerelmiller commented May 7, 2026

Uh oh!

jerelmiller May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

trevor-scheer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jerelmiller commented May 1, 2026 •

edited

Loading

changeset-bot Bot commented May 1, 2026 •

edited

Loading

jerelmiller May 1, 2026 •

edited

Loading

jerelmiller May 7, 2026 •

edited

Loading