GraphQL Codegen for generating gql types

packages/cli/package.json

@@ -41,7 +41,12 @@
     "prompts": "^2.4.1",
     "rimraf": "^3.0.2",
     "terminal-link": "^2.1.1",
-    "yargs": "^16.0.3"
+    "yargs": "^16.0.3",
+    "@graphql-codegen/cli": "^1.21.4",
+    "@graphql-codegen/typescript": "^1.22.0",
+    "@graphql-codegen/typescript-operations": "^1.17.16",
+    "@graphql-codegen/typescript-react-apollo": "^2.2.4",
+    "@graphql-codegen/typescript-resolvers": "^1.19.1"
   },
   "devDependencies": {
     "@types/listr": "^0.14.3",

packages/cli/src/commands/dev.js

@@ -6,11 +6,12 @@ import terminalLink from 'terminal-link'
 
 import { getConfig } from '@redwoodjs/internal'
 import { shutdownPort } from '@redwoodjs/internal/devtools'
+import { getProject } from '@redwoodjs/structure'
+const project = getProject()
 
 import { getPaths } from 'src/lib'
 import c from 'src/lib/colors'
 import { generatePrismaClient } from 'src/lib/generatePrismaClient'
-import runPreBuildTasks from 'src/lib/runPreBuildTasks'
 
 export const command = 'dev [side..]'
 export const description = 'Start development servers for api, and web'
@@ -53,9 +54,6 @@ export const handler = async ({
   const API_DIR_SRC = getPaths().api.src
   const WEB_DIR_SRC = getPaths().web.src
 
-  // Run tasks like type generate, etc.
-  runPreBuildTasks()
-
   if (side.includes('api')) {
     try {
       await generatePrismaClient({
@@ -86,6 +84,7 @@ export const handler = async ({
     }
   }
 
+  /** @type {Record<string, import('concurrently').CommandObj>} */
   const jobs = {
     api: {
       name: 'api',
@@ -101,10 +100,16 @@ export const handler = async ({
       command: `cd "${path.join(
         BASE_DIR,
         'web'
-      )}" && yarn webpack-dev-server --config ../node_modules/@redwoodjs/core/config/webpack.development.js ${forward}`,
+      )}" && yarn cross-env NODE_ENV=development webpack-dev-server --config ../node_modules/@redwoodjs/core/config/webpack.development.js ${forward}`,
       prefixColor: 'blue',
       runWhen: () => fs.existsSync(WEB_DIR_SRC),
     },
+    typeGenerator: {
+      name: 'typeGenerator',
+      command: 'yarn rw generate types --watch',
+      prefixColor: 'green',
+      runWhen: () => project.isTypeScriptProject,
+    },
   }
 
   if (esbuild) {
@@ -118,7 +123,7 @@ export const handler = async ({
 
   concurrently(
     Object.keys(jobs)
-      .map((n) => side.includes(n) && jobs[n])
+      .map((n) => (side.includes(n) || n === 'typeGenerator') && jobs[n])
       .filter((job) => job && job.runWhen()),
     {
       prefix: '{name} |',

packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap

@@ -169,7 +169,7 @@ export const Success = ({ userProfile }) => {
 
 exports[`creates a cell mock with a camelCase word name 1`] = `
 "// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
+export const standard = () => /* vars, { ctx, req } */ ({
   userProfile: {
     id: 42,
   },
@@ -179,7 +179,7 @@ export const standard = (/* vars, { ctx, req } */) => ({
 
 exports[`creates a cell mock with a kebabCase word name 1`] = `
 "// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
+export const standard = () => /* vars, { ctx, req } */ ({
   userProfile: {
     id: 42,
   },
@@ -189,7 +189,7 @@ export const standard = (/* vars, { ctx, req } */) => ({
 
 exports[`creates a cell mock with a multi word name 1`] = `
 "// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
+export const standard = () => /* vars, { ctx, req } */ ({
   userProfile: {
     id: 42,
   },
@@ -199,7 +199,7 @@ export const standard = (/* vars, { ctx, req } */) => ({
 
 exports[`creates a cell mock with a single word name 1`] = `
 "// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
+export const standard = () => /* vars, { ctx, req } */ ({
   user: {
     id: 42,
   },
@@ -209,7 +209,7 @@ export const standard = (/* vars, { ctx, req } */) => ({
 
 exports[`creates a cell mock with a snakeCase word name 1`] = `
 "// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
+export const standard = () => /* vars, { ctx, req } */ ({
   userProfile: {
     id: 42,
   },
@@ -338,7 +338,7 @@ export default { title: 'Cells/UserProfileCell' }
 `;
 
 exports[`creates a cell test with a camelCase word name 1`] = `
-"import { render, screen } from '@redwoodjs/testing'
+"import { render } from '@redwoodjs/testing'
 import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
@@ -364,7 +364,8 @@ describe('UserProfileCell', () => {
   // When you're ready to test the actual output of your component render
   // you could test that, for example, certain text is present:
   //
-  //   expect(screen.getByText('Hello, world')).toBeInTheDocument()
+  // 1. import { screen } from '@redwoodjs/testing'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
 
   it('renders Success successfully', async () => {
     expect(() => {
@@ -376,7 +377,7 @@ describe('UserProfileCell', () => {
 `;
 
 exports[`creates a cell test with a kebabCase word name 1`] = `
-"import { render, screen } from '@redwoodjs/testing'
+"import { render } from '@redwoodjs/testing'
 import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
@@ -402,7 +403,8 @@ describe('UserProfileCell', () => {
   // When you're ready to test the actual output of your component render
   // you could test that, for example, certain text is present:
   //
-  //   expect(screen.getByText('Hello, world')).toBeInTheDocument()
+  // 1. import { screen } from '@redwoodjs/testing'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
 
   it('renders Success successfully', async () => {
     expect(() => {
@@ -414,7 +416,7 @@ describe('UserProfileCell', () => {
 `;
 
 exports[`creates a cell test with a multi word name 1`] = `
-"import { render, screen } from '@redwoodjs/testing'
+"import { render } from '@redwoodjs/testing'
 import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
@@ -440,7 +442,8 @@ describe('UserProfileCell', () => {
   // When you're ready to test the actual output of your component render
   // you could test that, for example, certain text is present:
   //
-  //   expect(screen.getByText('Hello, world')).toBeInTheDocument()
+  // 1. import { screen } from '@redwoodjs/testing'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
 
   it('renders Success successfully', async () => {
     expect(() => {
@@ -452,7 +455,7 @@ describe('UserProfileCell', () => {
 `;
 
 exports[`creates a cell test with a single word name 1`] = `
-"import { render, screen } from '@redwoodjs/testing'
+"import { render } from '@redwoodjs/testing'
 import { Loading, Empty, Failure, Success } from './UserCell'
 import { standard } from './UserCell.mock'
 
@@ -478,7 +481,8 @@ describe('UserCell', () => {
   // When you're ready to test the actual output of your component render
   // you could test that, for example, certain text is present:
   //
-  //   expect(screen.getByText('Hello, world')).toBeInTheDocument()
+  // 1. import { screen } from '@redwoodjs/testing'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
 
   it('renders Success successfully', async () => {
     expect(() => {
@@ -490,7 +494,7 @@ describe('UserCell', () => {
 `;
 
 exports[`creates a cell test with a snakeCase word name 1`] = `
-"import { render, screen } from '@redwoodjs/testing'
+"import { render } from '@redwoodjs/testing'
 import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
@@ -516,7 +520,8 @@ describe('UserProfileCell', () => {
   // When you're ready to test the actual output of your component render
   // you could test that, for example, certain text is present:
   //
-  //   expect(screen.getByText('Hello, world')).toBeInTheDocument()
+  // 1. import { screen } from '@redwoodjs/testing'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
 
   it('renders Success successfully', async () => {
     expect(() => {

packages/cli/src/commands/generate/cell/cell.js

@@ -1,6 +1,7 @@
 import pascalcase from 'pascalcase'
 import pluralize from 'pluralize'
 
+import { transformTSToJS } from 'src/lib'
 import { getSchema } from 'src/lib'
 
 import { yargsDefaults } from '../../generate'
@@ -87,7 +88,7 @@ export const files = async ({
     extension: generateTypescript ? '.tsx' : '.js',
     webPathSection: REDWOOD_WEB_PATH_NAME,
     generator: 'cell',
-    templatePath: `cell${templateNameSuffix}.js.template`,
+    templatePath: `cell${templateNameSuffix}.tsx.template`,
     templateVars: {
       operationName,
       idType,
@@ -141,8 +142,12 @@ export const files = async ({
   //    "path/to/fileB": "<<<template>>>",
   // }
   return files.reduce((acc, [outputPath, content]) => {
+    const template = generateTypescript
+      ? content
+      : transformTSToJS(outputPath, content)
+
     return {
-      [outputPath]: content,
+      [outputPath]: template,
       ...acc,
     }
   }, {})
@@ -152,6 +157,7 @@ export const { command, description, builder, handler } =
   createYargsForComponentGeneration({
     componentName: 'cell',
     filesFn: files,
+    generateTypes: true,
     optionsObj: {
       ...yargsDefaults,
       list: {

packages/cli/src/commands/generate/cell/templates/cell.tsx.template

@@ -0,0 +1,22 @@
+import type { ${operationName} } from 'types/gql-types'
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+export const QUERY = gql`
+  query ${operationName}($id: ${idType}!) {
+    ${camelName}: ${camelName}(id: $id) {
+      id
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div style={{ color: 'red' }}>Error: {error.message}</div>
+)
+
+export const Success = ({ ${camelName} }: CellSuccessProps<${operationName}>) => {
+  return <div>{JSON.stringify(${camelName})}</div>
+}

packages/cli/src/commands/generate/cell/templates/cellList.tsx.template

@@ -0,0 +1,29 @@
+import type { ${operationName} } from 'types/gql-types'
+import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+
+
+export const QUERY = gql`
+  query ${operationName} {
+    ${camelName} {
+      id
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div style={{ color: 'red' }}>Error: {error.message}</div>
+)
+
+export const Success = ({ ${camelName} }: CellSuccessProps<${operationName}>) => {
+  return (
+    <ul>
+      {${camelName}.map((item) => {
+        return <li key={item.id}>{JSON.stringify(item)}</li>
+      })}
+    </ul>
+  )
+}

packages/cli/src/commands/generate/cell/templates/test.js.template

@@ -24,7 +24,8 @@ describe('${pascalName}Cell', () => {
   // When you're ready to test the actual output of your component render
   // you could test that, for example, certain text is present:
   //
-  //   expect(screen.getByText('Hello, world')).toBeInTheDocument()
+  // 1. import { screen } from '@redwoodjs/testing'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
 
   it('renders Success successfully', async () => {
     expect(() => {