Reload Schema after change fetcher request url

[MMousaviNejad]

I'm working on microservice and i need change schema with new url.
How should I work?
React 18.2
GraphiQL 1.9.13
GraphQL 16.5

[acao]

@varethpoet I think this is possible by using hooks from @graphiql/react, is this correct @thomasheyenbrock ? there should be a handler run from a hook, something like useExecutionContext?

this will probably be easier in 2.x (you can try the next tags if you want!) but I think with stable 1.x releases and the react sdk you can now invoke execution in a more modern way.

if that fails, I think 1.9.3 still sets window.g with the class component and lets you invoke class component methods 😭 (this was a hack. even in 2016 lol). There was some refactoring in the later 1.x versions that may have ended that though but I’m not certain. I don’t think we’ve ever reccomended or documented this interface and this had treated it as an internal, but it exists 🤷‍♀️

[acao]

I think there is another feature request for a reload button somewhere that could be linked to this, and we could document how to use @graphiql/react to make a simple reload schema button for the toolbar

[thomasheyenbrock]

Hi @varethpoet 👋 if you change the fetcher prop that you pass to the GraphiQL component, then this should trigger a new introspection request.

Sidenote @acao: This hasn't really changed compared to before we started refactoring the code, and it's likely gonna stay like this for v2.

[acao]

@thomasheyenbrock great way to do this!

[MMousaviNejad]

Hi @varethpoet 👋 if you change the fetcher prop that you pass to the GraphiQL component, then this should trigger a new introspection request.

Sidenote @acao: This hasn't really changed compared to before we started refactoring the code, and it's likely gonna stay like this for v2.

but sometimes not working correctly.

[acao]

@thomasheyenbrock are you sure all the methods are still available? there was a window.g.loadSchema() and window.g.executeQuery() or something like that people used to use before, I'm not sure the methods were marked as public, but yeah the hooks approach should work better now I think?

graphiql/packages/graphiql/src/components/GraphiQL.tsx

Line 904 in 50b8875

// Public methods

[thomasheyenbrock]

but sometimes not working correctly

@varethpoet Can you provide a reproduction for buggy behavior?

[thomasheyenbrock]

@acao I did remove some of these methods, but only those that were not marked as public, so I guess loadSchema was one of them. I figure the main reason to trigger introspection programmatically was the lack of a built-in way to do this in GraphiQL. (Which reminds me that this is still missing in v2!)

[acao]

@thomasheyenbrock ah yeah, that makes complete sense, it wasn't marked public so it was the right choice to make, and understandable for those who were using it I'm sure

And with the context/hooks architecture, the public component class methods would have been hard to pull off with the re-write anyways. If you can think of an easy way to backport it with context that would be cool, but that might be an unnecessary distraction for you with 2.0.0 and all.

For 2.0.x I would like to make it so the users can use the @graphiql/react hooks to achieve this programatically somehow. Then maybe they can subscribe to a graphql subscription or some other kind of websocket client connection with their own schema change notification service or what have you. I think playground got really fancy with this, but it may have just been a polling approach, I would have to go look

That said, a toolbar button and/or a keyboard shortcut (for a11y!) would be nifty

[dimaMachina]

we have a test for this case

graphiql/packages/graphiql/src/GraphiQL.spec.tsx

Lines 57 to 97 in a862358

	it('should refetch schema with new fetcher', async () => {
	let firstCalled = false;
	function firstFetcher() {
	firstCalled = true;
	return Promise.resolve(simpleIntrospection);
	}
	let secondCalled = false;
	function secondFetcher() {
	secondCalled = true;
	return Promise.resolve(simpleIntrospection);
	}
	// Initial render calls fetcher
	const { rerender } = render(<GraphiQL fetcher={firstFetcher} />);
	await waitFor(() => {
	expect(firstCalled).toEqual(true);
	});
	// Re-render does not call fetcher again
	firstCalled = false;
	await act(async () => {
	rerender(<GraphiQL fetcher={firstFetcher} />);
	});
	await waitFor(() => {
	expect(firstCalled).toEqual(false);
	});
	// Re-render with new fetcher is called.
	await act(async () => {
	rerender(<GraphiQL fetcher={secondFetcher} />);
	});
	await waitFor(() => {
	expect(secondCalled).toEqual(true);
	});
	});

so for me should works as expected, feel free to reply if you still have an issue with it