Upgrade graphiql to v5

.github/pull_request_template.md

@@ -0,0 +1,51 @@
+## 📌 Description
+
+Please include a summary of the changes and the related issue. Be concise but clear.
+
+> Example: "Fixes #42 - Updates the linter config and resolves formatting issues."
+
+---
+
+## 🔍 Changes Made
+
+- [ ] Brief bullet-point list of changes
+- [ ] Highlight **key files or logic updated**
+- [ ] Mention **any breaking changes** or impacts
+
+---
+
+## 🧪 Testing
+
+- [ ] Tested locally
+- [ ] Unit tests updated/added
+- [ ] CI pipeline passed (lint, tests)
+
+Describe **how you tested the changes** and any edge cases considered.
+
+---
+
+## 📷 Screenshots (if UI-related)
+
+> Add screenshots or GIFs showing before/after, if applicable.
+
+---
+
+## ✅ Checklist
+
+Please confirm all items are complete before requesting a review:
+
+- [ ] I have run `lint` and fixed any issues
+- [ ] I have run all existing tests and they pass
+- [ ] I have added tests for new code (if needed)
+- [ ] I have documented my changes (if needed)
+- [ ] Linked relevant issues in the PR description
+
+---
+
+## 📣 Reviewer Notes
+
+> Is there anything you’d like reviewers to focus on, or any context that’s useful for them?
+
+---
+
+Thank you for your contribution! 🙌

.github/workflows/prCheck.yaml

@@ -0,0 +1,37 @@
+name: Pull Request Checks
+on:
+  pull_request:
+    branches: [main]
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛒
+        uses: actions/checkout@v4
+      - name: Setup Node ⚙️
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x' # Todo use our .nvmrc instead
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies and build 🔧
+        run: npm run setup && npm run build
+      - name: Lint Code 🧹
+        run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛒
+        uses: actions/checkout@v4
+      - name: Setup Node ⚙️
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x' # Todo use our .nvmrc instead
+          registry-url: 'https://registry.npmjs.org'
+      - name: Release build 🏗️
+        run: npm run setup && npm run release
+      - name: Install Browsers 🌐
+        run: npx playwright install --with-deps
+      - name: Tests 🧪
+        run: npm run test
+

.github/workflows/publish.yaml

@@ -0,0 +1,21 @@
+name: Publish to NPM
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛒
+        uses: actions/checkout@v4
+      - name: Setup Node ⚙️
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x' # Todo use our .nvmrc instead
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies and build 🔧
+        run: npm run setup && npm run release
+      - name: Publish package on NPM 📦
+        run: npm run publish:npm
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.PUBLISH_TO_NPM_TOKEN }}

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

Readme.md

@@ -13,6 +13,15 @@ implementing [GraphQL Multipart Request: V3](https://workday.github.io/graphql-m
 
 We welcome contributions! Checkout the development guide to get started.
 
+### Publishing
+
+Publishing is done through github actions. When a new github version is created, it will automatically trigger
+a github action, that runs `lerna publish from-package`.
+
+This will publish all packages that have a version greater than what is currently published to npm. 
+[See Lerna publishing for details](https://lerna.js.org/docs/features/version-and-publish#from-package) 
+
+
 ### Reporting Issues
 
-If you find a bug or have a feature request, please open an issue.
+If you find a bug or have a feature request, please open an issue.

example/package.json

@@ -4,7 +4,7 @@
   "collaborators": [
     "Dylan Owen <dylan.owen@workday.com>"
   ],
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
     "dev": "webpack serve --mode=development",
     "build": "webpack --mode=development",
@@ -13,9 +13,11 @@
   },
   "type": "module",
   "dependencies": {
-    "@graphiql/toolkit": "^0.9.1",
-    "@workday/graphiql-plugin-multipart-requests": "^0.0.1",
-    "graphiql": "^3.2.1",
+    "@graphiql/toolkit": "^0.11.3",
+    "@graphiql/plugin-doc-explorer": "0.3.0",
+    "@graphiql/react": "^0.35.4",
+    "@workday/graphiql-plugin-multipart-requests": "^0.1.0",
+    "graphiql": "^5.0.3",
     "graphql": "^16.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

example/src/index.tsx

@@ -12,6 +12,7 @@ import {
   MultipartAttachmentsContext,
   MultipartAttachmentsProvider,
 } from '@workday/graphiql-plugin-multipart-requests';
+import 'graphiql/setup-workers/webpack';
 
 require('graphiql/graphiql.css');
 

example/webpack.config.cjs

@@ -38,13 +38,6 @@ module.exports = {
     ]
   },
   resolve: {
-    // make sure we get the same libraries even if we symlink in dependencies
-    alias: {
-      '@graphiql/react': path.resolve(__dirname, '../node_modules/@graphiql/react'),
-      graphql: path.resolve(__dirname, '../node_modules/graphql'),
-      react: path.resolve(__dirname, '../node_modules/react'),
-      'react-dom': path.resolve(__dirname, '../node_modules/react-dom')
-    },
     // graphql can accidentally be imported in 2 ways if we don't have this
     // https://stackoverflow.com/a/52635917/6079700
     extensions: ['.tsx', '.ts', '.mjs', '.js']