chore: Improved Possible Types DX and Framework integration for Graph…

…QL Fragments with Union and Interface support (redwoodjs#9594)

Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>

.github/workflows/ci.yml

@@ -702,6 +702,96 @@ jobs:
     steps:
       - run: echo "Skipped"
 
+  fragments-smoke-tests:
+    needs: check
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+
+    name: 📄 Fragments Smoke tests / ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+
+    env:
+      REDWOOD_CI: 1
+      REDWOOD_VERBOSE_TELEMETRY: 1
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: ⬢ Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: 🐈 Set up yarn cache
+        uses: ./.github/actions/set-up-yarn-cache
+
+      - name: 🐈 Yarn install
+        run: yarn install --inline-builds
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+
+      - name: 🔨 Build
+        run: yarn build
+
+      - name: 🌲 Set up test project
+        id: set-up-test-project
+        uses: ./.github/actions/set-up-test-project
+        with:
+          bundler: vite
+          canary: true
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
+
+      - name: Run Fragments codemods on test project
+        run: npx -y tsx ./tasks/test-project/add-gql-fragments ${{ steps.set-up-test-project.outputs.test-project-path }}
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: 🎭 Install playwright dependencies
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Fragments dev smoke tests
+        working-directory: ./tasks/smoke-tests/fragments-dev
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: '${{ steps.set-up-test-project.outputs.test-project-path }}'
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: Build for production
+        working-directory: ${{ steps.set-up-test-project.outputs.test-project-path }}
+        run: yarn rw build
+        env:
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+      - name: Run Fragments serve smoke tests
+        working-directory: ./tasks/smoke-tests/fragments-serve
+        run: npx playwright test
+        env:
+          REDWOOD_TEST_PROJECT_PATH: '${{ steps.set-up-test-project.outputs.test-project-path }}'
+          REDWOOD_DISABLE_TELEMETRY: 1
+
+  fragments-smoke-tests-skip:
+    needs: detect-changes
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+
+    name: 📄 Fragments Smoke tests / ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - run: echo "Skipped"
+
   crwa:
     needs: check
 

__fixtures__/fragment-test-project/.env.defaults

@@ -0,0 +1,19 @@
+# These environment variables will be used by default if you do not create any
+# yourself in .env. This file should be safe to check into your version control
+# system. Any custom values should go in .env and .env should *not* be checked
+# into version control.
+
+# schema.prisma defaults
+DATABASE_URL=file:./dev.db
+
+# location of the test database for api service scenarios (defaults to ./.redwood/test.db if not set)
+# TEST_DATABASE_URL=file:./.redwood/test.db
+
+# disables Prisma CLI update notifier
+PRISMA_HIDE_UPDATE_MESSAGE=true
+
+# Option to override the current environment's default api-side log level
+# See: https://redwoodjs.com/docs/logger for level options, defaults to "trace" otherwise.
+# Most applications want "debug" or "info" during dev, "trace" when you have issues and "warn" in production.
+# Ordered by how verbose they are: trace | debug | info | warn | error | silent
+# LOG_LEVEL=debug

__fixtures__/fragment-test-project/.env.example

@@ -0,0 +1,4 @@
+# DATABASE_URL=file:./dev.db
+# TEST_DATABASE_URL=file:./.redwood/test.db
+# PRISMA_HIDE_UPDATE_MESSAGE=true
+# LOG_LEVEL=trace

__fixtures__/fragment-test-project/.gitignore

@@ -0,0 +1,22 @@
+.idea
+.DS_Store
+.env
+.netlify
+.redwood/*
+!.redwood/README.md
+dev.db*
+dist
+dist-babel
+node_modules
+yarn-error.log
+web/public/mockServiceWorker.js
+web/types/graphql.d.ts
+api/types/graphql.d.ts
+api/src/lib/generateGraphiQLHeader.*
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

__fixtures__/fragment-test-project/.redwood/README.md

@@ -0,0 +1,44 @@
+# .redwood
+
+## What is this directory?
+
+Redwood uses this `.redwood` directory to store transitory data that aids in the smooth and convenient operation of your Redwood project.
+
+## Do I need to do anything with this directory?
+
+No. You shouldn't have to create, edit or delete anything in this directory in your day-to-day work with Redwood.
+
+You don't need to commit any other contents of this directory to your version control system. It's ignored by default.
+
+## What's in this directory?
+
+### Files
+
+| Name              | Description |
+| :---------------- | :------- |
+| commandCache.json | This file contains mappings to assist the Redwood CLI in efficiently executing commands. |
+| schema.graphql    | This is the GraphQL schema which has been automatically generated from your Redwood project. |
+| studio.db         | The sqlite database used by the experimental `rw exp studio` feature. |
+| telemetry.txt     | Contains a unique ID used for telemetry. This value is rotated every 24 hours to protect your project's anonymity. |
+| test.db           | The sqlite database used when running tests. |
+
+### Directories
+
+| Name        | Description |
+| :---------- | :------- |
+| locks       | Stores temporary files that Redwood uses to keep track of the execution of async/background tasks between processes.  |
+| logs        | Stores log files for background tasks such as update checking. |
+| prebuild    | Stores transpiled JavaScript that is generated as part of Redwood's build process. |
+| telemetry   | Stores the recent telemetry that the Redwood CLI has generated. You may inspect these files to see everything Redwood is anonymously collecting. |
+| types       | Stores the results of type generation. |
+| updateCheck | Stores a file which contains the results of checking for Redwood updates. |
+
+We try to keep this README up to date but you may, from time to time, find other files or directories in this `.redwood` directory that have not yet been documented here. This is likely nothing to worry about but feel free to let us know and we'll update this list.
+
+### Telemetry
+
+RedwoodJS collects completely anonymous telemetry data about general usage. For transparency, that data is viewable in the respective directories and files. To learn more and manage your project's settings, visit [telemetry.redwoodjs.com](https://telemetry.redwoodjs.com).
+
+### Have any questions?
+
+Feel free to reach out to us in the [RedwoodJS Community](https://community.redwoodjs.com/) forum if you have any questions.

__fixtures__/fragment-test-project/.vscode/extensions.json

@@ -0,0 +1,16 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "ofhumanbondage.react-proptypes-intellisense",
+    "mgmcdermott.vscode-language-babel",
+    "wix.vscode-import-cost",
+    "pflannery.vscode-versionlens",
+    "editorconfig.editorconfig",
+    "prisma.prisma",
+    "graphql.vscode-graphql",
+    "csstools.postcss",
+    "bradlc.vscode-tailwindcss"
+  ],
+  "unwantedRecommendations": []
+}

__fixtures__/fragment-test-project/.vscode/launch.json

@@ -0,0 +1,56 @@
+{
+  "version": "0.3.0",
+  "configurations": [
+    {
+      "command": "yarn redwood dev --apiDebugPort 18911", // you can add --fwd='--open=false' to prevent the browser from opening
+      "name": "Run Dev Server",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+    {
+      "name": "Attach API debugger",
+      "port": 18911, // you can change this port, see https://redwoodjs.com/docs/project-configuration-dev-test-build#debugger-configuration
+      "request": "attach",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "type": "node",
+      "localRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
+      "remoteRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
+      "sourceMaps": true,
+      "restart": true,
+      "preLaunchTask": "WaitForDevServer",
+    },
+    {
+      "name": "Launch Web debugger",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:8910",
+      "webRoot": "${workspaceRoot}/web/src",
+      "preLaunchTask": "WaitForDevServer",
+    },
+    {
+      "command": "yarn redwood test api",
+      "name": "Test api",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+    {
+      "command": "yarn redwood test web",
+      "name": "Test web",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+  ],
+  "compounds": [
+    {
+      "name": "Start Debug",
+      "configurations": [
+        "Run Dev Server",
+        "Attach API debugger",
+        "Launch Web debugger"
+      ],
+      "stopAll": true
+    }
+  ]
+}

__fixtures__/fragment-test-project/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.tabSize": 2,
+  "files.trimTrailingWhitespace": true,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "[prisma]": {
+    "editor.formatOnSave": true
+  }
+}