Skip to content

Comments

Update example with json schema#282

Merged
kzuraw merged 4 commits intomainfrom
update-example-with-json-schema
Jun 23, 2025
Merged

Update example with json schema#282
kzuraw merged 4 commits intomainfrom
update-example-with-json-schema

Conversation

@kzuraw
Copy link
Contributor

@kzuraw kzuraw commented Jun 18, 2025

  • Migrated GraphQL code generation configuration from .graphqlrc.yml to a new codegen.ts. Added support for custom scalar types and immutable types.
  • Introduced a new webhook (OrderFilterShippingMethodsWebhook) to handle filtering of shipping methods to showcase JSON schema generated types
  • Updated pnpm to 10.x
  • Updated package.json to include new scripts for generating GraphQL types and webhook types, and upgraded dependencies to align with the latest Saleor version.
  • Moved repo to ESM & updated tsconfig

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

Migrate GraphQL code generation to a centralized codegen.ts, add JSON-schema–driven webhook types, and update project setup for ESM, pnpm v10, and new generation scripts.

  • Replaced .graphqlrc.yml with codegen.ts for GraphQL codegen, enabling custom scalars and immutable types
  • Added OrderFilterShippingMethodsWebhook handler plus a script to generate its TypeScript types from JSON schemas
  • Updated package.json scripts, pnpm workspace, and dependencies for ESM support, pnpm v10, and new generate:* commands

Reviewed Changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
vitest.config.ts Added vite-tsconfig-paths plugin to support path aliases in tests
src/pages/api/webhooks/order-filter-shipping-methods.ts New sync webhook using JSON-schema types to filter shipping methods
src/pages/api/webhooks/order-created.ts Adjusted import ordering and alias paths
src/pages/api/manifest.ts Registered the new ORDER_FILTER_SHIPPING_METHODS webhook
src/order-example.tsx Removed inline gql tag, updated import path and regeneration instructions
scripts/generate-app-webhooks-types.ts Script to fetch JSON schemas and compile TypeScript types
pnpm-workspace.yaml Configured onlyBuiltDependencies for pnpm v10
package.json Switched to ESM, added generate:* scripts, bumped pnpm and node engines
next.config.ts Introduced basic Next.js config file with reactStrictMode
graphql/subscriptions/order-filter-shipping-methods.graphql Added subscription document for filtering shipping methods
graphql/queries/last-order.graphql Added query document for last order example
graphql/fragments/order-filter-shipping-methods.graphql Fragment defining payload shape for shipping-methods filter
codegen.ts New GraphQL Codegen config file with custom scalars
README.md Documented both GraphQL and JSON-schema generation workflows
.graphqlrc.yml Removed deprecated GraphQL codegen configuration
.github/workflows/main.yml Broadened CI check to detect changes across all generated files

@github-actions
Copy link

Differences Found

⚠️ 13 packages or licenses were added.

Expand
License	Package
MIT	@apidevtools/json-schema-ref-parser
MIT	@esbuild/netbsd-arm64
MIT	@esbuild/openbsd-arm64
MIT	@graphql-codegen/add
MIT	@jsdevtools/ono
MIT	@types/lodash
MIT	fdir
MIT	globrex
MIT	json-schema-to-typescript
MIT	tinyglobby
MIT	tsconfck
MIT	tsx
MIT	vite-tsconfig-paths

Summary

Expand
License Name Package Count Packages
0BSD 1
Packages
  • tslib
MPL-2.0 1
Packages
  • axe-core
Public Domain 1
Packages
  • jsonify
Python-2.0 1
Packages
  • argparse
CC-BY-4.0 2
Packages
  • @saleor/macaw-ui
  • caniuse-lite
CC0-1.0 2
Packages
  • language-subtag-registry
  • type-fest
<<missing>> 3
Packages
  • busboy
  • saleor-app-template
  • streamsearch
LGPL-3.0-or-later 11
Packages
  • @img/sharp-libvips-darwin-arm64
  • @img/sharp-libvips-darwin-x64
  • @img/sharp-libvips-linux-arm
  • @img/sharp-libvips-linux-arm64
  • @img/sharp-libvips-linux-s390x
  • @img/sharp-libvips-linux-x64
  • @img/sharp-libvips-linuxmusl-arm64
  • @img/sharp-libvips-linuxmusl-x64
  • @img/sharp-wasm32
  • @img/sharp-win32-ia32
  • @img/sharp-win32-x64
BSD-3-Clause 13
Packages
  • @humanwhocodes/object-schema
  • @saleor/app-sdk
  • @saleor/eslint-plugin-saleor-app
  • abab
  • asn1js
  • esquery
  • ieee754
  • immutable
  • signedsource
  • source-map
  • source-map-js
  • sprintf-js
  • tough-cookie
BSD-2-Clause 15
Packages
  • @typescript-eslint/parser
  • @typescript-eslint/typescript-estree
  • css-what
  • damerau-levenshtein
  • dotenv
  • entities
  • escodegen
  • eslint-scope
  • espree
  • esprima
  • esrecurse
  • estraverse
  • esutils
  • uri-js
  • webidl-conversions
Apache-2.0 33
Packages
  • @ampproject/remapping
  • @humanwhocodes/config-array
  • @humanwhocodes/module-importer
  • @img/sharp-darwin-arm64
  • @img/sharp-darwin-x64
  • @img/sharp-linux-arm
  • @img/sharp-linux-arm64
  • @img/sharp-linux-s390x
  • @img/sharp-linux-x64
  • @img/sharp-linuxmusl-arm64
  • @img/sharp-linuxmusl-x64
  • @img/sharp-wasm32
  • @img/sharp-win32-ia32
  • @img/sharp-win32-x64
  • @opentelemetry/api
  • @opentelemetry/semantic-conventions
  • @swc/counter
  • @swc/helpers
  • aria-query
  • axobject-query
  • And 13 more...
ISC 37
Packages
  • ast-types-flow
  • cli-width
  • cliui
  • electron-to-chromium
  • eslint-import-resolver-typescript
  • fastq
  • flatted
  • fs.realpath
  • get-caller-file
  • glob
  • glob-parent
  • graceful-fs
  • inflight
  • inherits
  • isexe
  • lru-cache
  • minimatch
  • mute-stream
  • once
  • picocolors
  • And 17 more...
MIT 758
Packages
  • @0no-co/graphql.web
  • @aashutoshrathi/word-wrap
  • @apidevtools/json-schema-ref-parser
  • @ardatan/relay-compiler
  • @ardatan/sync-fetch
  • @babel/code-frame
  • @babel/compat-data
  • @babel/core
  • @babel/generator
  • @babel/helper-annotate-as-pure
  • @babel/helper-compilation-targets
  • @babel/helper-create-class-features-plugin
  • @babel/helper-environment-visitor
  • @babel/helper-function-name
  • @babel/helper-hoist-variables
  • @babel/helper-member-expression-to-functions
  • @babel/helper-module-imports
  • @babel/helper-module-transforms
  • @babel/helper-optimise-call-expression
  • @babel/helper-plugin-utils
  • And 738 more...

Comment on lines 5 to 6
const schemaUrl =
"https://raw.githubusercontent.com/saleor/saleor/main/saleor/json_schemas/OrderFilterShippingMethods.json";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's right that we hardcode that here. I will bootstrap new app from app-template, want to use OTHER json schema and I will have no idea how to do that.

Can we maybe extract these urls to some list and comment out not needed, or create any other abstraction?

OrderFilterShippingMethodsPayloadFragment,
OrderFilterShippingMethodsSubscriptionDocument,
} from "@/generated/graphql";
import { FilterShippingMethods } from "@/generated/json-schema/order-filter-shipping-methods";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont think path json-schema is right. It's a detail. For the app it's typescript, so maybe let's do some types or something like this?

@kzuraw kzuraw merged commit a388a99 into main Jun 23, 2025
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants