> ## Documentation Index
> Fetch the complete documentation index at: https://developer.jtl-software.com/llms.txt
> Use this file to discover all available pages before exploring further.

# GraphQL playground

> Interactive GraphQL IDE to explore and test the JTL Platform API

export const Playground = ({token, tenantId}) => {
  const iframeRef = React.useRef(null);
  const tokenRef = React.useRef(token);
  const tenantIdRef = React.useRef(tenantId);
  React.useEffect(() => {
    function onMessage(event) {
      if (event.data?.type !== "graphql-playground-ready") return;
      const iframe = iframeRef.current;
      if (!iframe?.contentWindow) return;
      const config = {
        type: "graphql-config",
        url: "https://api.jtl-cloud.com/erp/v2/graphql"
      };
      const authHeader = tokenRef.current;
      if (authHeader) {
        config.token = authHeader.replace(/^Bearer\s+/i, "");
        if (tenantIdRef.current) {
          config.headers = {
            "x-tenant-id": tenantIdRef.current
          };
        }
      }
      iframe.contentWindow.postMessage(config, "https://jtl-software.github.io");
    }
    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, []);
  return <iframe ref={iframeRef} src="https://jtl-software.github.io/devdocs-graphql-playground/?url=https://api.jtl-cloud.com/erp/v2/graphql" title="GraphQL playground" className="block border-0" style={{
    width: "100%",
    height: "calc(100dvh - 160px)",
    display: "block"
  }} />;
};

<p className="graphql-desktop-only">
  Explore the JTL ERP API using GraphQL. Use the schema explorer on the left to
  browse available queries and mutations, or type directly in the editor. Log in
  to run queries against your own ERP instance.
</p>

<div className="graphql-sandbox-layout w-full mt-8" style={{ maxWidth: "100%", overflow: "hidden", position: "relative" }}>
  <Playground token={user?.token} tenantId={user?.tenantId} />

  <div className="graphql-mobile-overlay">
    <div className="graphql-mobile-overlay__card">
      <div className="graphql-mobile-overlay__icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="3" width="20" height="14" rx="2" />

          <line x1="8" y1="21" x2="16" y2="21" />

          <line x1="12" y1="17" x2="12" y2="21" />
        </svg>
      </div>

      <h2>Best Viewed on Desktop</h2>

      <p>
        The GraphQL playground is a full interactive IDE built for larger screens.
        Open this page on a desktop or tablet to browse the schema and run queries.
      </p>
    </div>
  </div>
</div>