From 1c055f597b59a2c6c6ab8ae10b8e9b771c91c2c1 Mon Sep 17 00:00:00 2001 From: Arda TANRIKULU Date: Mon, 27 Jan 2025 05:28:46 -0500 Subject: [PATCH] fix(graphiql): show input value deprecations (#3712) --- .changeset/stale-schools-tell.md | 7 ++++ packages/graphiql/src/YogaGraphiQL.tsx | 2 + .../__integration-tests__/browser.spec.ts | 34 +++++++++++++++++ pnpm-lock.yaml | 38 +++++++++---------- 4 files changed, 61 insertions(+), 20 deletions(-) create mode 100644 .changeset/stale-schools-tell.md diff --git a/.changeset/stale-schools-tell.md b/.changeset/stale-schools-tell.md new file mode 100644 index 0000000000..5b1ba2ca36 --- /dev/null +++ b/.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 diff --git a/packages/graphiql/src/YogaGraphiQL.tsx b/packages/graphiql/src/YogaGraphiQL.tsx index aac9491176..2a55dbbc86 100644 --- a/packages/graphiql/src/YogaGraphiQL.tsx +++ b/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) => 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} diff --git a/packages/graphql-yoga/__integration-tests__/browser.spec.ts b/packages/graphql-yoga/__integration-tests__/browser.spec.ts index 5225e268b2..1dd6bebf32 100644 --- a/packages/graphql-yoga/__integration-tests__/browser.spec.ts +++ b/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', () => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 057766f993..e7f9eb9102 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22986,7 +22986,7 @@ snapshots: unixify: 1.0.0 urlpattern-polyfill: 8.0.2 yargs: 17.7.2 - zod: 3.23.8 + zod: 3.24.1 transitivePeerDependencies: - encoding - rollup @@ -24656,7 +24656,7 @@ snapshots: eslint: 9.19.0(jiti@2.4.2) eslint-config-prettier: 9.1.0(eslint@9.19.0(jiti@2.4.2)) eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@9.19.0(jiti@2.4.2)) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.19.0(jiti@2.4.2)))(eslint@9.19.0(jiti@2.4.2)))(eslint@9.19.0(jiti@2.4.2)) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@9.19.0(jiti@2.4.2)) eslint-plugin-jsonc: 2.18.2(eslint@9.19.0(jiti@2.4.2)) eslint-plugin-jsx-a11y: 6.10.2(eslint@9.19.0(jiti@2.4.2)) eslint-plugin-mdx: 3.1.5(eslint@9.19.0(jiti@2.4.2)) @@ -25322,7 +25322,7 @@ snapshots: dependencies: '@typescript-eslint/types': 5.62.0 '@typescript-eslint/visitor-keys': 5.62.0 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.4.0(supports-color@9.4.0) globby: 11.1.0 is-glob: 4.0.3 semver: 7.6.3 @@ -27458,11 +27458,9 @@ snapshots: dependencies: ms: 2.1.2 - debug@4.3.7(supports-color@9.4.0): + debug@4.3.7: dependencies: ms: 2.1.3 - optionalDependencies: - supports-color: 9.4.0 debug@4.4.0(supports-color@8.1.1): dependencies: @@ -28044,7 +28042,7 @@ snapshots: base64id: 2.0.0 cookie: 1.0.2 cors: 2.8.5 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 engine.io-parser: 5.2.3 ws: 8.17.1 transitivePeerDependencies: @@ -28387,7 +28385,7 @@ snapshots: eslint: 9.19.0(jiti@2.4.2) eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@9.19.0(jiti@2.4.2)) - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.19.0(jiti@2.4.2)))(eslint@9.19.0(jiti@2.4.2)))(eslint@9.19.0(jiti@2.4.2)) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@9.19.0(jiti@2.4.2)) eslint-plugin-jsx-a11y: 6.10.2(eslint@9.19.0(jiti@2.4.2)) eslint-plugin-react: 7.37.4(eslint@9.19.0(jiti@2.4.2)) eslint-plugin-react-hooks: 5.1.0(eslint@9.19.0(jiti@2.4.2)) @@ -28426,7 +28424,7 @@ snapshots: is-glob: 4.0.3 stable-hash: 0.0.4 optionalDependencies: - eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.19.0(jiti@2.4.2)))(eslint@9.19.0(jiti@2.4.2)))(eslint@9.19.0(jiti@2.4.2)) + eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@9.19.0(jiti@2.4.2)) transitivePeerDependencies: - supports-color @@ -28475,7 +28473,7 @@ snapshots: eslint: 9.19.0(jiti@2.4.2) eslint-compat-utils: 0.5.1(eslint@9.19.0(jiti@2.4.2)) - eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.19.0(jiti@2.4.2)))(eslint@9.19.0(jiti@2.4.2)))(eslint@9.19.0(jiti@2.4.2)): + eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.21.0(eslint@9.19.0(jiti@2.4.2))(typescript@5.7.3))(eslint-import-resolver-typescript@3.7.0)(eslint@9.19.0(jiti@2.4.2)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.8 @@ -29029,7 +29027,7 @@ snapshots: extract-zip@2.0.1: dependencies: - debug: 4.3.7(supports-color@9.4.0) + debug: 4.4.0(supports-color@9.4.0) get-stream: 5.2.0 yauzl: 2.10.0 optionalDependencies: @@ -29360,7 +29358,7 @@ snapshots: follow-redirects@1.15.9(debug@4.3.7): optionalDependencies: - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 follow-redirects@1.15.9(debug@4.4.0): optionalDependencies: @@ -30239,7 +30237,7 @@ snapshots: https-proxy-agent@7.0.6: dependencies: agent-base: 7.1.3 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.4.0(supports-color@9.4.0) transitivePeerDependencies: - supports-color @@ -32861,7 +32859,7 @@ snapshots: content-type: 1.0.5 cookie: 0.7.2 cron-parser: 4.9.0 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 decache: 4.6.2 dot-prop: 9.0.0 dotenv: 16.4.7 @@ -34950,7 +34948,7 @@ snapshots: send@1.1.0: dependencies: - debug: 4.3.6 + debug: 4.4.0(supports-color@9.4.0) destroy: 1.2.0 encodeurl: 2.0.0 escape-html: 1.0.3 @@ -35226,7 +35224,7 @@ snapshots: socket.io-adapter@2.5.5: dependencies: - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 ws: 8.17.1 transitivePeerDependencies: - bufferutil @@ -35236,7 +35234,7 @@ snapshots: socket.io-parser@4.2.4: dependencies: '@socket.io/component-emitter': 3.1.2 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 transitivePeerDependencies: - supports-color @@ -35245,7 +35243,7 @@ snapshots: accepts: 1.3.8 base64id: 2.0.0 cors: 2.8.5 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 engine.io: 6.6.3 socket.io-adapter: 2.5.5 socket.io-parser: 4.2.4 @@ -35783,7 +35781,7 @@ snapshots: tabtab@3.0.2: dependencies: - debug: 4.3.7(supports-color@9.4.0) + debug: 4.4.0(supports-color@9.4.0) es6-promisify: 6.1.1 inquirer: 6.5.2 minimist: 1.2.8 @@ -36777,7 +36775,7 @@ snapshots: dependencies: chalk: 4.1.2 commander: 9.5.0 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.4.0(supports-color@9.4.0) transitivePeerDependencies: - supports-color