Add experimental support for component fields (#1176)

.changeset/config.json

@@ -7,5 +7,5 @@
 	"access": "public",
 	"baseBranch": "main",
 	"updateInternalDependencies": "patch",
-	"ignore": ["e2e-api", "e2e-router", "e2e-kit", "e2e-svelte", "site"]
+	"ignore": ["e2e-api", "e2e-react", "e2e-kit", "e2e-svelte", "site"]
 }

.changeset/plenty-vans-decide.md

@@ -0,0 +1,5 @@
+---
+'houdini-react': patch
+---
+
+Added experimental support for componentFields

.github/workflows/canary.yml

@@ -7,6 +7,7 @@ on:
         branches:
             - main
             - next
+            - component-fields
 
 env:
     CI: true
@@ -58,6 +59,6 @@ jobs:
               run: |
                   pnpm changeset version --snapshot
                   pnpm run build
-                  pnpm changeset publish --no-git-tag --snapshot --tag canary
+                  pnpm changeset publish --no-git-tag --snapshot --tag experimental
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/tests.yml

@@ -147,7 +147,7 @@ jobs:
         name: End-to-End Tests
         strategy:
             matrix:
-                os: [ubuntu-latest, windows-latest]
+                os: [ubuntu-latest]
                 framework: [e2e-svelte, e2e-kit]
         runs-on: ${{ matrix.os }}
 

e2e/react/.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+vite.config.ts.*

e2e/react/houdini.config.js

@@ -24,6 +24,9 @@ const config = {
 		RentedBook: {
 			keys: ['userId', 'bookId'],
 		},
+		Sponsor: {
+			keys: ['name'],
+		},
 	},
 
 	plugins: {
@@ -36,6 +39,10 @@ const config = {
 			sessionKeys: ['supersecret'],
 		},
 	},
+
+	features: {
+		componentFields: true,
+	},
 }
 
 export default config

e2e/react/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "e2e-router",
+	"name": "e2e-react",
 	"private": true,
 	"version": "0.0.0",
 	"type": "module",
@@ -12,29 +12,39 @@
 		"build:build": "pnpm build: && pnpm build",
 		"dev": "vite",
 		"build": "vite build",
-		"preview": "vite preview"
+		"tests": "playwright test ",
+		"test": "npm run tests",
+		"preview": "vite dev"
 	},
 	"dependencies": {
 		"@cloudflare/workers-types": "^4.20230904.0",
 		"@graphql-tools/schema": "^9.0.4",
+		"@pothos/core": "^3.38.0",
+		"@pothos/plugin-relay": "^3.44.0",
+		"@pothos/plugin-simple-objects": "^3.7.0",
 		"@whatwg-node/server": "^0.9.14",
 		"cookie": "^0.5.0",
 		"graphql-yoga": "^4.0.4",
 		"houdini": "workspace:^",
 		"houdini-adapter-cloudflare": "workspace:^",
 		"houdini-react": "workspace:^",
 		"react": "^18.3.0-canary-d6dcad6a8-20230914",
-		"react-dom": "^18.3.0-canary-d6dcad6a8-20230914"
+		"react-dom": "^18.3.0-canary-d6dcad6a8-20230914",
+		"react-streaming-compat": "^0.3.18"
 	},
 	"devDependencies": {
+		"@playwright/test": "1.30.0",
 		"@types/react": "^18.0.27",
 		"@types/react-dom": "^18.0.10",
 		"@vitejs/plugin-react": "^3.1.0",
+		"autoprefixer": "^10.4.16",
 		"concurrently": "7.1.0",
 		"cross-env": "^7.0.3",
 		"e2e-api": "workspace:^",
 		"hono": "^3.6.0",
 		"houdini-adapter-node": "workspace:^",
+		"postcss": "^8.4.31",
+		"tailwindcss": "^3.3.3",
 		"typescript": "^4.9.3",
 		"vite": "^4.1.0",
 		"wrangler": "^3.7.0"

e2e/react/playwright.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from '@playwright/test'
+
+export default defineConfig({
+	retries: process.env.CI ? 3 : 0,
+	workers: 5,
+	reporter: process.env.CI ? [['list'], ['html'], ['github']] : [['list']],
+	use: { screenshot: 'only-on-failure' },
+	testIgnore: '**/$houdini/**',
+
+	webServer: {
+		command: 'npm run dev -- --port 3008',
+		port: 3008,
+		timeout: 120 * 1000,
+	},
+})

e2e/react/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

e2e/react/src/+index.jsx

@@ -7,8 +7,12 @@ export default function App({ children }) {
 				<meta charSet="utf-8" />
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<title>Houdini • e2e • React</title>
+				<link
+					rel="stylesheet"
+					href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"
+				/>
 			</head>
-			<body>
+			<body style={{ maxWidth: '100%' }}>
 				<ErrorBoundary>{children}</ErrorBoundary>
 			</body>
 		</html>

e2e/react/src/api/+schema.ts

@@ -1,6 +1,4 @@
-import { makeExecutableSchema } from '@graphql-tools/schema'
+import { builder } from './builder'
+import './users'
 
-import { resolvers } from './resolvers'
-import { typeDefs } from './typeDefs'
-
-export default makeExecutableSchema({ typeDefs, resolvers })
+export default builder.toSchema()

e2e/react/src/api/builder.ts

@@ -0,0 +1,22 @@
+import SchemaBuilder from '@pothos/core'
+import RelayPlugin from '@pothos/plugin-relay'
+import SimpleObjectsPlugin from '@pothos/plugin-simple-objects'
+
+import type { User } from './users'
+
+export const builder = new SchemaBuilder<{
+	Objects: {
+		User: User
+	}
+}>({
+	plugins: [SimpleObjectsPlugin, RelayPlugin],
+	relayOptions: {},
+})
+
+builder.queryType({})
+
+builder.queryField('hello', (t) =>
+	t.string({
+		resolve: () => 'Hello World! // From Houdini!',
+	})
+)