fix(graphiql): show input value deprecations (#3712)

.changeset/stale-schools-tell.md

@@ -0,0 +1,7 @@
+---
+'graphql-yoga': patch
+'@graphql-yoga/graphiql': patch
+'@graphql-yoga/render-graphiql': patch
+---
+
+Show deprecated input fields, arguments and all other input values in GraphiQL

packages/graphiql/src/YogaGraphiQL.tsx

@@ -103,6 +103,7 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
       credentials: 'same-origin',
       specifiedByUrl: true,
       directiveIsRepeatable: true,
+      inputValueDeprecation: true,
       ...props,
       headers: props.additionalHeaders || {},
       fetch: (...args: Parameters<WindowOrWorkerGlobalScope['fetch']>) => globalThis.fetch(...args),
@@ -152,6 +153,7 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
         shouldPersistHeaders
         plugins={[explorer]}
         schemaDescription={true}
+        inputValueDeprecation={true}
         query={query}
         {...props}
         fetcher={fetcher}

packages/graphql-yoga/__integration-tests__/browser.spec.ts

@@ -1,6 +1,7 @@
 import {
   GraphQLBoolean,
   GraphQLFloat,
+  GraphQLInputObjectType,
   GraphQLInt,
   GraphQLList,
   GraphQLNonNull,
@@ -100,6 +101,25 @@ export function createTestSchema() {
             return liveQueryCounter;
           },
         },
+        deprecatedField: {
+          type: GraphQLString,
+          deprecationReason: 'This is deprecated',
+          args: {
+            deprecatedArg: {
+              type: new GraphQLInputObjectType({
+                name: 'DeprecatedInput',
+                fields: {
+                  deprecatedInputField: {
+                    type: GraphQLString,
+                    deprecationReason: 'This is deprecated',
+                  },
+                },
+              }),
+              deprecationReason: 'This is deprecated',
+            },
+          },
+          resolve: (_root, args) => args['deprecatedArg']['deprecatedInputField'],
+        },
       }),
     }),
     mutation: new GraphQLObjectType({
@@ -536,6 +556,20 @@ describe('browser', () => {
         headerContentEl$.then(headerContentEl => getElementText(headerContentEl!)),
       ).resolves.toBe(defaultHeader);
     });
+
+    it('supports input value deprecations', async () => {
+      await page.goto(`http://localhost:${port}${endpoint}`);
+      await page.click('.graphiql-un-styled[data-index="0"]');
+      await page.click('a.graphiql-doc-explorer-type-name');
+      await page.getByText('Show Deprecated Fields').click();
+      const deprecatedField = page.getByText('deprecatedField');
+      expect(await deprecatedField.count()).toBe(1);
+      await deprecatedField.click();
+      expect(await page.getByText('deprecatedArg').count()).toBe(1);
+      expect(await page.getByText('DeprecatedInput').count()).toBe(1);
+      await page.getByText('DeprecatedInput').click();
+      expect(await page.getByText('deprecatedInputField').count()).toBe(1);
+    });
   });
 
   describe('CORS', () => {