Monorepo (#3)

* monorepo

* up

* Update .github/workflows/test.yml+5

* ignore

* monorepo

* Update e2e/playwright.config.ts+7

* CI: use pnpm

* Update packages/@newmo/graphql-codegen-plugin-typescript-react-apollo/package.json+1

* update build

* add @graphql-typed-document-node/core

* Update pnpm-lock.yaml

* CI: 20

* CI: 20

.github/workflows/test.yml

@@ -1,5 +1,5 @@
 name: test
-on: [push, pull_request]
+on: [ push, pull_request ]
 permissions:
   contents: read
 jobs:
@@ -8,16 +8,39 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [ 18, 20 ]
     steps:
       - name: checkout
         uses: actions/checkout@v3
+      - uses: pnpm/[email protected]
       - name: setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: "npm"
+          cache: "pnpm"
           node-version: ${{ matrix.node-version }}
       - name: Install
-        run: npm ci
+        run: pnpm install
       - name: Test
-        run: npm test
+        run: pnpm test
+  e2e:
+    name: "E2E Tests"
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+      - uses: pnpm/[email protected]
+      - name: setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: "pnpm"
+          node-version: 20
+      - name: Install
+        run: pnpm install
+      - name: Playwright Install
+        run: pnpm playwright install --with-deps
+        working-directory: e2e/
+      - name: Build All
+        run: pnpm run build
+      - name: Playwright Test
+        run: pnpm run e2e
+        working-directory: e2e/

.gitignore

@@ -1,3 +1,6 @@
+.nx
+lib/
+.next/
 ### Generated by gibo (https://github.com/simonwhitaker/gibo)
 ### https://raw.github.com/github/gitignore/4488915eec0b3a45b5c63ead28f286819c0917de/Node.gitignore
 
@@ -229,3 +232,5 @@ fabric.properties
 # Build files
 /lib
 /module
+
+.nx/cache

.prettierignore

@@ -0,0 +1,2 @@
+generated/
+snapshots/

README.md

@@ -1,89 +1,35 @@
-# @newmo/graphql-codegen-plugin-typescript-react-apollo
+# GraphQL Code Generator Plugins
 
-[GraphQL Codegen Plugin](https://github.com/dotansimha/graphql-code-generator) to create React Hooks using [Apollo's client](https://www.apollographql.com/docs/react/) for [Client preset](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client)
+This monorepo contains GraphQL Code Generator plugins.
 
-## Motivation
+## Packages
 
-> We now recommend using the client-preset package for a better developer experience and smaller impact on bundle size.
-> -- [typescript-react-apollo](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-react-apollo) is not recommended to use with `@newmo/graphql-codegen-plugin-typescript-react-apollo` because it is not maintained.
+- [@newmo/graphql-codegen-plugin-typescript-react-apollo](./packages/@newmo/graphql-codegen-plugin-typescript-react-apollo)
+  - TypeScript React Apollo plugin for GraphQL Code Generator
 
-However, [Client preset](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client) does not generate `React Hooks` for `@appllo/client`.
+## Development
 
-This plugin generates React Hooks using Apollo's client.
-Also, This plugin depends on [Client preset](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client).
+This repository uses pnpm as package manager.
 
-## Install
+### Install dependencies
 
-Install with [npm](https://www.npmjs.com/):
-
-    npm install @newmo/graphql-codegen-plugin-typescript-react-apollo --save-dev
-    # this plugin depends on @graphql-codegen/client-preset
-    npm install @graphql-codegen/cli @graphql-codegen/client-preset --save-dev
-
-## Usage
-
-You need to it with [Client preset](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client).
-
-Your `graphql-codegen.ts` should look like this:
-
-```ts
-import type { CodegenConfig } from '@graphql-codegen/cli';
-const config: CodegenConfig = {
-    overwrite: true,
-    schema: "./api/graphql/api.graphqls",
-    documents: "./api/graphql/query.graphql",
-    generates: {
-        // generates types to api/generated/*
-        './api/generated/': {
-            preset: 'client'
-        },
-        // generates React Hooks using Apollo's client to api/generated/hooks.tsx
-        './api/generated/hooks.tsx': {
-            'plugins': [
-                '@newmo/graphql-codegen-plugin-typescript-react-apollo'
-            ],
-            config: {
-                // path to generated types
-                // In this case, it refer './api/generated/graphql.ts'
-                typesFile: './graphql'
-            }
-        }
-    }
-};
-
-export default config;
+```sh
+pnpm install
 ```
 
-Run codegen:
-
-    $ graphql-codegen --config graphql-codegen.ts
-
-## Example output
+### Build
 
-See [test/snapshots/typescript](test/snapshots/typescript) for example output.
-
-## Changelog
-
-See [Releases page](https://github.com/newmo-oss/graphql-codegen-plugin-typescript-react-apollo/releases).
-
-## Running tests
-
-Install devDependencies and Run `npm test`:
-
-    npm test
-
-## Contributing
+```sh
+pnpm run build
+```
 
-Pull requests and stars are always welcome.
+### Test
 
-For bugs and feature requests, [please create an issue](https://github.com/newmo-oss/graphql-codegen-plugin-typescript-react-apollo/issues).
+```sh
+pnpm run test
+```
 
-1. Fork it!
-2. Create your feature branch: `git checkout -b my-new-feature`
-3. Commit your changes: `git commit -am 'Add some feature'`
-4. Push to the branch: `git push origin my-new-feature`
-5. Submit a pull request :D
 
 ## License
 
-MIT © newmo, Inc.
+MIT 

test/.gitignore → e2e/.gitignore

@@ -34,3 +34,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/api/graphql/api.graphqls

@@ -0,0 +1,59 @@
+"""
+@exampleString directive specifies an example value for a String field.
+This example value is used in the fake data.
+
+Note: This is for @newmo/graphql-fake-server
+"""
+directive @exampleString(
+    """
+    The value of the String field.
+    @exampleString(value: "example")
+    """
+    value: String!
+) on FIELD_DEFINITION | ARGUMENT_DEFINITION | INPUT_FIELD_DEFINITION
+
+
+type Query {
+    """
+    検索文字列にマッチする目的地の候補
+    """
+    destinationCandidates(text: String!): [Destination!]!
+
+    """
+    乗車履歴
+    """
+    rideHistories: [RideHistory!]!
+}
+
+type RideHistory {
+    "乗車履歴の ID"
+    id: ID!
+
+    "目的地"
+    destination: Destination!
+}
+
+type Destination {
+    "目的地の ID"
+    id: ID!
+
+    "目的地の名前"
+    name: String! @exampleString(value: "Osaka")
+}
+
+input RideHistoryInput {
+    "目的地の名前"
+    name: String! @exampleString(value: "Tokyo")
+}
+type RideHistoryOutput {
+    "乗車履歴の ID"
+    id: ID!
+    "目的地"
+    name: String! @exampleString(value: "Tokyo")
+}
+type Mutation {
+    """
+    乗車履歴を作成する
+    """
+    createRideHistory(input: RideHistoryInput!): RideHistoryOutput!
+}

e2e/graphql-codegen.ts

@@ -0,0 +1,24 @@
+import type { CodegenConfig } from "@graphql-codegen/cli";
+
+const config: CodegenConfig = {
+    overwrite: true,
+    schema: "./api/graphql/api.graphqls",
+    documents: "./api/graphql/query.graphql",
+    generates: {
+        "./generated/typescript/": {
+            preset: "client",
+            presetConfig: {
+                fragmentMasking: { unmaskFunctionName: "getFragmentData" }
+            },
+            documentTransforms: []
+        },
+        "./generated/typescript/hooks.tsx": {
+            plugins: ["@newmo/graphql-codegen-plugin-typescript-react-apollo"],
+            config: {
+                typesFile: "./graphql" // required
+            }
+        }
+    }
+};
+
+export default config;

test/next.config.mjs → e2e/next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    "output": "export",
+};
 
 export default nextConfig;

e2e/package.json

@@ -0,0 +1,39 @@
+{
+  "private": true,
+  "name": "@example/e2e",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm run /^dev:/",
+    "dev:next": "next dev",
+    "dev:api": "graphql-fake-server --schema ./api/graphql/api.graphqls",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "codegen": "graphql-codegen --config ./graphql-codegen.ts"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.9.11",
+    "@graphql-typed-document-node/core": "^3.2.0",
+    "graphql": "^16.8.1",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/client-preset": "^4.2.4",
+    "@newmo/graphql-codegen-plugin-typescript-react-apollo": "workspace:*",
+    "@newmo/graphql-fake-server": "^0.9.3",
+    "@playwright/test": "^1.44.1",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.1",
+    "typescript": "^5"
+  }
+}