[PR #4483] [CLOSED] feat: one-click graphQL query & mutation generation #4830

New issue

Closed

opened 2026-03-17 02:19:46 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:19:46 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/4483
Author: @bogking
Created: 10/27/2024
Status: ❌ Closed

Base: next ← Head: main

📝 Commits (10+)

6a171bb Update docker-compose.yml
2663b6d Update docker-compose.deploy.yml
833d858 Update prod.Dockerfile
9da3e9e Update prod.Dockerfile
f042ccc Issue #4371 - Update Query.vue
a36ebd5 Issue #4371 - Update Sidebar.vue
45d0b2f Issue #4371 - Update settings.ts
f5a631a Issue #4371 - Update DispatchingStore.ts
6fcbf78 Issue #4371 - Update settings.vue
7af64db Issue #4371 - Update index.ts

📊 Changes

7 files changed (+594 additions, -35 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/graphql/Query.vue (+47 -19)
📝 packages/hoppscotch-common/src/components/graphql/Sidebar.vue (+55 -1)
➕ packages/hoppscotch-common/src/helpers/graphql/graphql-codegen/har.ts (+126 -0)
➕ packages/hoppscotch-common/src/helpers/graphql/graphql-codegen/index.ts (+227 -0)
➕ packages/hoppscotch-common/src/helpers/graphql/queryBuilder.ts (+48 -0)
📝 packages/hoppscotch-common/src/newstore/settings.ts (+67 -14)
📝 packages/hoppscotch-common/src/pages/settings.vue (+24 -1)

📄 Description

Closes #4371

PR Description

This PR adds functionality to be able to automatically generate query and mutation templates for selected data types or operations from the documentation and adds a setting to control the 'max depth' level of this nesting when adding a schema.

What's changed

Updated Query.vue to be able to display the query generated from the documentation.
Updated Sidebar.vue to be able to include a tab for getting queries from the documentation and a button to do so.
Updated settings.ts to contain a setting to set the maximum nesting depth for the queries generated from the documentation.
Updated DispatchingStore.ts slightly to enable dispatches to be able to work with the rest of the code.
Updated index.ts to be able to integrate the graphql schema templates and requests with the changes made to be able to get queries from the documentation.
Created queryBuilder.ts as a helper file to be able to generate a graphql query based on the documentation. Contains functions to generate and build the query.
Created har.ts to be able to parse the GQL request from the HoppGQLRequest and convert it to a HTTP Archive or HAR request.
Created index.ts to be able to use the HTTPSnippet library to make code snippets for the languages listed in codegenDefinitions from the HAR requests made through the har.ts file.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/4483 **Author:** [@bogking](https://github.com/bogking) **Created:** 10/27/2024 **Status:** ❌ Closed **Base:** `next` ← **Head:** `main` --- ### 📝 Commits (10+) - [`6a171bb`](https://github.com/hoppscotch/hoppscotch/commit/6a171bb2caf63dc5ac9ec92c6e0378450f134f3d) Update docker-compose.yml - [`2663b6d`](https://github.com/hoppscotch/hoppscotch/commit/2663b6d3f29964bda774463956522f7fb0d02641) Update docker-compose.deploy.yml - [`833d858`](https://github.com/hoppscotch/hoppscotch/commit/833d8580e67dda305ce170d1d2d441ecc549bbe6) Update prod.Dockerfile - [`9da3e9e`](https://github.com/hoppscotch/hoppscotch/commit/9da3e9e569c7318cd3d2656384bad59830915727) Update prod.Dockerfile - [`f042ccc`](https://github.com/hoppscotch/hoppscotch/commit/f042ccc1a36573e1c11159a639d984c1e1507832) Issue #4371 - Update Query.vue - [`a36ebd5`](https://github.com/hoppscotch/hoppscotch/commit/a36ebd59e35f8e7147a3e1c5933ea98dee94c481) Issue #4371 - Update Sidebar.vue - [`45d0b2f`](https://github.com/hoppscotch/hoppscotch/commit/45d0b2f7dbb3c422634728b0436f3b82980553b8) Issue #4371 - Update settings.ts - [`f5a631a`](https://github.com/hoppscotch/hoppscotch/commit/f5a631add908ed62f74064d70be1235290408af4) Issue #4371 - Update DispatchingStore.ts - [`6fcbf78`](https://github.com/hoppscotch/hoppscotch/commit/6fcbf7835625d9b2c10a64ee32fccc14ee870cbf) Issue #4371 - Update settings.vue - [`7af64db`](https://github.com/hoppscotch/hoppscotch/commit/7af64db6a93f8c075c2d934ce37a0b01142fde69) Issue #4371 - Update index.ts ### 📊 Changes **7 files changed** (+594 additions, -35 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/graphql/Query.vue` (+47 -19) 📝 `packages/hoppscotch-common/src/components/graphql/Sidebar.vue` (+55 -1) ➕ `packages/hoppscotch-common/src/helpers/graphql/graphql-codegen/har.ts` (+126 -0) ➕ `packages/hoppscotch-common/src/helpers/graphql/graphql-codegen/index.ts` (+227 -0) ➕ `packages/hoppscotch-common/src/helpers/graphql/queryBuilder.ts` (+48 -0) 📝 `packages/hoppscotch-common/src/newstore/settings.ts` (+67 -14) 📝 `packages/hoppscotch-common/src/pages/settings.vue` (+24 -1) </details> ### 📄 Description Closes #4371 ### PR Description This PR adds functionality to be able to automatically generate query and mutation templates for selected data types or operations from the documentation and adds a setting to control the 'max depth' level of this nesting when adding a schema. ### What's changed - Updated Query.vue to be able to display the query generated from the documentation. - Updated Sidebar.vue to be able to include a tab for getting queries from the documentation and a button to do so. - Updated settings.ts to contain a setting to set the maximum nesting depth for the queries generated from the documentation. - Updated DispatchingStore.ts slightly to enable dispatches to be able to work with the rest of the code. - Updated index.ts to be able to integrate the graphql schema templates and requests with the changes made to be able to get queries from the documentation. - Created queryBuilder.ts as a helper file to be able to generate a graphql query based on the documentation. Contains functions to generate and build the query. - Created har.ts to be able to parse the GQL request from the HoppGQLRequest and convert it to a HTTP Archive or HAR request. - Created index.ts to be able to use the HTTPSnippet library to make code snippets for the languages listed in codegenDefinitions from the HAR requests made through the har.ts file. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>