Changing intialState.document is not getting added to the query...

[chitalian]

const GraphQLPage = (props: GraphQLPageProps) => {
  const [query, setQuery] = useState<string>("EXAMPLE QUERY");
  const [showGraphqlHeader, setShowGraphqlHeader] = useState<boolean>(false);
  return (
    <div>
      <button onClick={() => setQuery("query { hello }")}>Hello</button>
      {query}
      <div className="flex flex-col items-end">
        <button onClick={() => setShowGraphqlHeader(!showGraphqlHeader)}>
          Show header
        </button>
        <div className="overflow-hidden h-[calc(60vh)] w-full">
          <ApolloExplorer
            graphRef={"helicone@main"}
            initialState={{
              document: query,

              displayOptions: {
                theme: "light",
                docsPanelState: "closed",
                showHeadersAndEnvVars: false,
              },
            }}
            className={clsx(showGraphqlHeader || "-mt-14", "h-full")}
            runTelemetry={false}
            key={query}
          />
        </div>
      </div>
    </div>
  );
};

When using setState. it is not changing the text in the ApolloExplorer

[akoenig]

It appears to be a regression in 3.1.1, as version 3.1.0 works as expected. The issue is not limited to just initialState.document, but rather the entire initialState object is not being processed. This is the change set between 3.1.1 and 3.1.0: https://github.com/apollographql/embeddable-explorer/compare/%40apollo/explorer%403.1.0...%40apollo/explorer%403.1.1

So pinning "@apollo/explorer": "3.1.0" is the workaround for the moment.

[Lykan9999]

Any updates for this issue? I am facing a similar bug where the component doesn’t actually update the value for an Authorization header.

Version used

3.5.0

Code

          <ApolloExplorer
            endpointUrl={endpoint}
            schema={print(schema)}
            initialState={{
              document: DEFAULT_EXAMPLE_QUERY,
              variables: {},
              headers: {
                Authorization:
                  isLive ? keys?.liveKey : keys?.sandboxKey
              },
              displayOptions: {
                theme: 'light',
                docsPanelState: 'open',
                showHeadersAndEnvVars: true,
              },
            }}
            runTelemetry={false}
            persistExplorerState={false}
          />

The rendered component seems to persist the value of the first render.

[mayakoneval]

Hey folks!

The initialState for the Explorer is the default operation, but if you are a user that has modified the document, we use your current state from local storage instead of this configuration every time on load.

If you clear local storage for explorer.embed.apollographql.com in your dev tools, does it work as expected? Thanks!

[uchia-itachi]

No , i tried clearing the localstorage before setting the initial state using useState hook , i can see the props is updated in dev tool but not reflecting in the UI. npm package used: "@apollo/sandbox": "^2.5.1",

[mayakoneval]

Unfortunately, setting the initialState using the useState hook won't work here because when the Sandbox is loaded the default operation is already saved. You would need to, on state change when you have the initial state that you want, render the Embedded Sandbox for the first time.