Is it possible to share GraphiQL queries and variables via URL parameters?

[roukmoute]

Background
Our team frequently uses GraphiQL for testing and debugging our GraphQL services. We have a collaborative environment where sharing specific queries and mutations among team members is a common need.

Query Sharing Feature
We are looking to improve our efficiency by sharing GraphiQL queries and variables directly via URLs. This would allow a team member to craft a query, and then share a link to that query with another member, who can immediately execute the same query without the need to manually copy and paste it.

Documentation Review
I have searched through the GraphiQL documentation and repositories for information on this feature but have not found clear instructions or references. Before we consider requesting this feature, we want to ensure that we are not missing an existing capability.

Specifics
Is there an existing feature in GraphiQL that allows for sharing state, including queries and variables, via URL parameters?
If so, could you please point us to the relevant documentation or provide an example of how this can be achieved?
Use Case
For instance, we'd like to share a link like the following, which pre-populates the query and variables:

http://localhost:4000/graphiql?query=query%20GetUser($userID%3A%20String)%20{%20user(id%3A%20$userID)%20{%20name%20}%20}&variables={"userID":"1"}

Additional Information
Any information on whether this is possible and how to implement it would be greatly appreciated. This feature would significantly aid our development process and make our GraphQL interactions more efficient.

Thank you for your assistance and for the great work on GraphiQL!

[acao]

Yes it's possible! Our demo implementation ships with this:
https://github.com/graphql/graphiql/blob/main/packages/graphiql/resources/renderExample.js

It can also now be achieved with the react sdk, without using props, here is an example:
saleor/saleor-graphql-playground#23

[roukmoute]

Thank you for your prompt reply! Could you tell me from which version this feature was implemented, please?

[acao]

@roukmoute this has always been possible since the project was made public 8 years ago!

It is not a built-in feature, but rather, implemented using props as you can see.

[mbrowne]

I'm not using the React SDK in the way it's used at saleor/saleor-graphql-playground#23, so I opted for the first option, but that link is broken...fortunately I found it in an earlier commit:

https://github.com/graphql/graphiql/blob/1f9335051fffc9e6a6f950b6f8060ed521b56789/packages/graphiql/resources/renderExample.js

Also, the API has changed slightly so I had to make a few changes. Here is my working version:

      import React from 'react';
      import ReactDOM from 'react-dom/client';
      import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
      import { createGraphiQLFetcher } from '@graphiql/toolkit';
      import { explorerPlugin } from '@graphiql/plugin-explorer';
      import 'graphiql/setup-workers/esm.sh';

      // Below is some custom URL handling code to include the query in the URL, so it can
      // be shared with others, using the recommendation at https://github.com/graphql/graphiql/discussions/3450

      // Parse the search string to get url parameters.
      var search = window.location.search;
      var parameters = {};
      search
        .substr(1)
        .split('&')
        .forEach(function (entry) {
          var eq = entry.indexOf('=');
          if (eq >= 0) {
            parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(
              entry.slice(eq + 1),
            );
          }
        });

      // When the query and variables string is edited, update the URL bar so
      // that it can be easily shared.
      function onEditQuery(newQuery) {
        parameters.query = newQuery;
        updateURL();
      }

      function onEditVariables(newVariables) {
        parameters.variables = newVariables;
        updateURL();
      }

      function onEditHeaders(newHeaders) {
        parameters.headers = newHeaders;
        updateURL();
      }

      function onEditOperationName(newOperationName) {
        parameters.operationName = newOperationName;
        updateURL();
      }

      function onTabChange(tabsState) {
        const activeTab = tabsState.tabs[tabsState.activeTabIndex];
        parameters.query = activeTab.query;
        parameters.variables = activeTab.variables;
        parameters.headers = activeTab.headers;
        parameters.operationName = activeTab.operationName;
        updateURL();
      }

      function updateURL() {
        var newSearch =
          '?' +
          Object.keys(parameters)
            .filter(function (key) {
              return Boolean(parameters[key]);
            })
            .map(function (key) {
              return (
                encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key])
              );
            })
            .join('&');
        history.replaceState(null, null, newSearch);
      }

      const fetcher = createGraphiQLFetcher({
        url: '/graphql',
      });
      const plugins = [HISTORY_PLUGIN, explorerPlugin()];
      
      function App() {
        return React.createElement(GraphiQL, {
          fetcher,
          plugins,
          defaultEditorToolsVisibility: true,
          initialQuery: parameters.query,
          initialVariables: parameters.variables,
          initialHeaders: parameters.headers,
          initialOperationName: parameters.operationName,
          onEditQuery,
          onEditVariables,
          onEditHeaders,
          onEditOperationName,
          onTabChange,
        });
      }

      const container = document.getElementById('graphiql');
      const root = ReactDOM.createRoot(container);
      root.render(React.createElement(App));

Bonus: if you want to default to the dark theme, add this after the declaration of App:

      // default to dark theme
      if (!window.localStorage.getItem('graphiql:theme')) {
        window.localStorage.setItem('graphiql:theme', 'dark');
      }