[graphiql] Allow for full customization of GraphiQL

[EmrysMyrddin]

The current wrapper for GraphiQL restricts which options can be passed to the underlying GraphiQL components (while advertised otherwise by the types).

This PR aims to propagate all options to GraphiQL.
It also adds every serializable options to the Yoga plugin, for easier customization without rolling out a entire custom renderer.

[changeset-bot]

🦋 Changeset detected

Latest commit: 179ae8b

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

This PR includes changesets to release 23 packages

Name	Type
graphql-yoga	Minor
@graphql-yoga/graphiql	Minor
@graphql-yoga/nestjs	Major
@graphql-yoga/render-graphiql	Major
@graphql-yoga/plugin-apollo-inline-trace	Major
@graphql-yoga/plugin-apq	Major
@graphql-yoga/plugin-csrf-prevention	Major
@graphql-yoga/plugin-defer-stream	Major
@graphql-yoga/plugin-disable-introspection	Major
@graphql-yoga/plugin-graphql-sse	Major
@graphql-yoga/plugin-jwt	Major
@graphql-yoga/plugin-persisted-operations	Major
@graphql-yoga/plugin-prometheus	Major
@graphql-yoga/plugin-response-cache	Major
@graphql-yoga/plugin-sofa	Major
apollo-federation-gateway-with-yoga	Patch
apollo-subgraph-with-yoga	Patch
graphql-lambda	Patch
cloudflare-advanced	Patch
cloudflare	Patch
nextjs-app	Patch
hello-world-benchmark	Patch
@graphql-yoga/nestjs-federation	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

[github-actions]

Apollo Federation Subgraph Compatibility Results

Federation 1 Support	Federation 2 Support
_service 🟢 @key (single) 🟢 @key (multi) 🟢 @key (composite) 🟢 repeatable @key 🟢 @requires 🟢 @provides 🟢 federated tracing 🟢	@link 🟢 @shareable 🟢 @tag 🟢 @override 🟢 @inaccessible 🟢 @composeDirective 🟢 @interfaceObject 🟢

Learn more:

• Apollo Federation Subgraph Specification
• Compatibility Tests

[github-actions]

💻 Website Preview

The latest changes are available as preview in: https://c462e09b.graphql-yoga.pages.dev

[github-actions]

✅ Benchmark Results

     ✓ no_errors{mode:graphql}
     ✓ expected_result{mode:graphql}
     ✓ no_errors{mode:graphql-jit}
     ✓ expected_result{mode:graphql-jit}
     ✓ no_errors{mode:graphql-response-cache}
     ✓ expected_result{mode:graphql-response-cache}
     ✓ no_errors{mode:graphql-no-parse-validate-cache}
     ✓ expected_result{mode:graphql-no-parse-validate-cache}

     checks.......................................: 100.00% ✓ 410164      ✗ 0     
     data_received................................: 1.7 GB  14 MB/s
     data_sent....................................: 83 MB   690 kB/s
     http_req_blocked.............................: avg=1.56µs   min=1.07µs   med=1.38µs   max=283.27µs p(90)=2.05µs   p(95)=2.26µs  
     http_req_connecting..........................: avg=2ns      min=0s       med=0s       max=134.37µs p(90)=0s       p(95)=0s      
     http_req_duration............................: avg=368.71µs min=215.62µs med=330.9µs  max=25.03ms  p(90)=477.33µs p(95)=505.8µs 
       { expected_response:true }.................: avg=368.71µs min=215.62µs med=330.9µs  max=25.03ms  p(90)=477.33µs p(95)=505.8µs 
     ✓ { mode:graphql-jit }.......................: avg=285.87µs min=215.62µs med=263.76µs max=15.13ms  p(90)=296.48µs p(95)=310.73µs
     ✓ { mode:graphql-no-parse-validate-cache }...: avg=502.31µs min=404.45µs med=472.05µs max=9.53ms   p(90)=532.14µs p(95)=570.96µs
     ✓ { mode:graphql-response-cache }............: avg=351.22µs min=271.95µs med=330.87µs max=7.52ms   p(90)=365µs    p(95)=379.48µs
     ✓ { mode:graphql }...........................: avg=375.76µs min=271.26µs med=340.92µs max=25.03ms  p(90)=391.62µs p(95)=426.01µs
     http_req_failed..............................: 0.00%   ✓ 0           ✗ 205082
     http_req_receiving...........................: avg=34.2µs   min=17.26µs  med=33.67µs  max=6.97ms   p(90)=39.97µs  p(95)=42.51µs 
     http_req_sending.............................: avg=8.45µs   min=5.83µs   med=7.39µs   max=4.12ms   p(90)=11.11µs  p(95)=12.38µs 
     http_req_tls_handshaking.....................: avg=0s       min=0s       med=0s       max=0s       p(90)=0s       p(95)=0s      
     http_req_waiting.............................: avg=326.05µs min=182.16µs med=288.62µs max=24.86ms  p(90)=433.97µs p(95)=460.47µs
     http_reqs....................................: 205082  1708.991436/s
     iteration_duration...........................: avg=580.21µs min=391.53µs med=540.02µs max=25.76ms  p(90)=692.8µs  p(95)=726.9µs 
     iterations...................................: 205082  1708.991436/s
     vus..........................................: 1       min=1         max=1   
     vus_max......................................: 2       min=2         max=2   

[github-actions]

🚀 Snapshot Release (alpha)

The latest changes of this PR are available as alpha on npm (based on the declared changesets):

Package	Version	Info
@graphql-yoga/apollo-link	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/urql-exchange	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/redis-event-target	3.0.1-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/graphiql	4.3.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
graphql-yoga	5.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/nestjs	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/nestjs-federation	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-apollo-inline-trace	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-apq	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-csrf-prevention	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-defer-stream	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-disable-introspection	2.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-graphql-sse	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-jwt	2.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-persisted-operations	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-prometheus	5.1.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-response-cache	3.6.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/plugin-sofa	3.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/render-graphiql	5.4.0-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎
@graphql-yoga/subscription	5.0.1-alpha-20240604120731-179ae8b8	npm ↗︎ unpkg ↗︎