feat (graphiql-plugin-doc-explorer): virtualized schema types list in Docs pane

[simmerer]

Adds virtualization for the top-level list of the Docs pane, keeping things performant for huge schemas.

The new <VirtualList /> component (employing @tanstack/react-virtual) is used for the "All Types" list in the Docs pane when there are more than 1000 elements. With 1000 or fewer, that list is simply rendered into the DOM as before.

(I'm currently working with a schema that results in a list of more than 42,000 schema elements, and all of those items getting rendered directly into the DOM results in buggy/crashy behavior in the Docs pane.)

[changeset-bot]

🦋 Changeset detected

Latest commit: 521fa38

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@graphiql/plugin-doc-explorer	Minor
graphiql	Patch

Not sure what this means? Click here to learn what changesets are.

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

[trevor-scheer]

@simmerer sorry about the flaky test failure, just bad timing. Should be fixed now, sou should be able to merge or rebase main and have that clear up!

[trevor-scheer]

@simmerer thanks for the contribution! I have a couple initial thoughts and I'm interested to hear yours.

1. I think this is great - I know there is no shortage of massive schemas in the wild so the value is certainly there. I'm just a bit torn on whether this belongs in the GraphiQL repo or as a community plugin that we recommend.
2. If we decide it belongs here, I think I'd rather see this as something users opt in to rather than selecting an arbitrary number for the virtualized mode. Again, possibly as a separate plugin (1st party, in this case) and document its existence and how to use it via the plugins prop (or some boolean that selects which docs plugin to use, just spitballing).

Separately, do you have a huge schema handy I could try this out against? 😅
Probably would be a good addition to this repo so we can readily test things that are grounded in reality.

[simmerer]

@trevor-scheer Happy to go with your judgement either way on point 1.

As far as 2, how about I switch to an enableVirtualized prop and default its value to false? Since the only meaningful change to the Docs explorer is the optional virtualization (no other functional or aesthetic changes), it doesn't feel like it quite demands a separate package.

There's a few great examples here of huge schemas: https://github.com/fotoetienne/big-federated-graphs, and edge0/composed.graphqls is the largest one.

[trevor-scheer]

no other functional or aesthetic changes

I think this is a reasonable point and don't mind the boolean prop. I'd be happy with that direction.

I'm fairly new to this project so I'm going to ping @dimaMachina to see what he thinks and help calibrate my senses (mostly re: 1). If we don't hear from him in a timely fashion I'd say we can move forward with it. In the meantime (as you probably knew or have inferred by now), you can pretty trivially implement this as your own plugin and use it in lieu of the docs explorer until we land it.