GraphQL Codegen for generating gql types #2485

dac09 · 2021-05-11T11:28:21Z

What does it do?

Adds command yarn rw generate types which will generate all autogenerated types (currently CurrentUser and graphql types)
Modifies yarn rw dev to also call above generator
Makes QueryOperationResult and MutationOperationResult overridable types so that when you bring your gql client, you can add your own types. (See packages/web/src/apollo/typeOverride.ts)

The generated types can be used like this:

// import generate type ->
import { PetQuery } from 'types/gql-types'
import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'

export const QUERY = gql`
  query PetQuery {
    pets {
      id
    }
  }
`
// -> See type declaration here
export const Success = ({ pets }: CellSuccessProps<PetsQuery>) => {

You also get types from the Apollo client! (Overridable for other clients)

I realise that its unusal that rw generate types --watch has a watch flag, open to suggestions for a better way. I just thought generate was the best place to put this.

Uses graphql-codegen underneath.

Outstanding tasks:

~~Investigate using makeMergeSchema instead of the actual api server for generating types~~
Update: Peter's cell mirrored types may generate the schema to a file, which we can reuse.
Remove generating types from build process elsewhere
Modify typescript generators for Cells to import types "optimistically"
Modify naming of scaffold queries to prevent conflicts in names (e.g. EditTaskQuery vs GetTaskQuery)
was already done in another PR
Also pass other props passed to the Cell components (...queryRest)
Handle plural cells and their types
Handle typescript templates for .stories.tsx, .tests.tsx and .mocks.ts

Closes #418

github-actions · 2021-05-11T11:31:58Z

📦 PR Packages

Click to Show Package Download Links

Install this PR by running yarn rw upgrade --pr 2485:0.31.2-4b44d71

Remove unused imports

All type generation now under rw g types Move watcher one level up, so it can be reused more easily for other actions

…-codegen * 'main' of github.com:redwoodjs/redwood: (54 commits) Add private methods loose explicitly (redwoodjs#2554) Custom `useAuth` pass through for `RedwoodApolloProvider` (redwoodjs#2455) Prerender all routes nested in Set with prerender prop (redwoodjs#2542) Upgrade eslint and prettier packages including formatting fixes (redwoodjs#2540) contributors updates (redwoodjs#2544) Rename default datasource (redwoodjs#1941) Add default config for Component generation (redwoodjs#1814) build(deps): bump core-js from 3.10.1 to 3.12.1 (redwoodjs#2481) upgrade babel 7.14.2 with misc babel packages (redwoodjs#2541) build(deps): bump http-proxy-middleware from 1.1.0 to 2.0.0 (redwoodjs#2536) build(deps): bump pino-pretty from 4.7.1 to 4.8.0 (redwoodjs#2534) build(deps): bump concurrently from 6.0.2 to 6.1.0 (redwoodjs#2533) build(deps-dev): bump firebase-admin from 9.7.0 to 9.8.0 (redwoodjs#2522) build(deps): bump esbuild-loader from 2.10.0 to 2.13.0 (redwoodjs#2518) build(deps): bump @graphql-tools/merge from 6.2.13 to 6.2.14 (redwoodjs#2516) updating minor dependency versions across packages (redwoodjs#2532) Add JSON headers to Function generator template (redwoodjs#2457) fixed firebase promises so that they can be caught (redwoodjs#2503) Prevent re-initialization of a Firebase app that is already initialized (redwoodjs#2504) build(deps-dev): bump magic-sdk from 2.7.0 to 4.3.0 (redwoodjs#2463) ...

dac09 · 2021-05-20T17:33:03Z

packages/web/src/index.ts

-export { createCell }
-
-/** @deprecated `withCell` will be removed in v0.32.0, please use `createCell` instead. */
-export const withCell = createCell


Note that I've removed withCell

…-codegen * 'main' of github.com:redwoodjs/redwood: Adds option to cell generation for lists of a given model (redwoodjs#2569) Router: More helpful typings for Route (redwoodjs#2592) upgrade Prisma v2.23.0 (redwoodjs#2566) add crowdin contribs (redwoodjs#2560) `rw exec` to run arbitary scripts in Redwood context (redwoodjs#2548)

dac09 · 2021-05-21T17:36:26Z

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 } */) => ({


I dunno why the snapshots do this weird thing. Its not actually doing this when we actually generate 🤷‍♂️

dac09 · 2021-05-21T17:36:55Z

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

@@ -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'


Another one of the weird snapshot things. Something to do with tsToJs maybe

dac09 · 2021-05-21T17:39:15Z

packages/cli/src/commands/dev.js

@@ -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}`,


This will also allow us to use tailwind's JIT without more hassle

peterp

Two small things that are problems, but overall looks good to me!

peterp · 2021-05-24T09:58:37Z

packages/web/src/components/createCell.tsx

@@ -1,39 +1,43 @@
-import { useQuery, OperationResult } from './GraphQLHooksProvider'
+import { A } from 'ts-toolbelt'


This is a devDependency

Suggested change

import { A } from 'ts-toolbelt'

import { A } from 'ts-toolbelt'

haha not sure what the change here is peter! But yes its a devDep, did you mean import type only?

lol, I don't know why I used the suggestion tool... top-kek!

I mean that because it's a devDependency it won't be installed for users, and it looks like a "design time requirement," basically I'm not sure what the type looks like when it's generated? Does it reference A or does it interpolate that value and expand it in the generated type def?

packages/web/src/global.web-auto-imports.ts

peterp · 2021-05-24T10:05:12Z

Let's combine the efforts for creating docs once I've merged my two TS generation PRs.

…-codegen * 'main' of github.com:redwoodjs/redwood: Removes console warnings in webhook verifiers (redwoodjs#2563) build(deps): bump eslint from 7.26.0 to 7.27.0 (redwoodjs#2610) CONTRIBUTING.md: styling tweaks for improved readability and consistency (redwoodjs#2608) build(deps): bump esbuild from 0.11.21 to 0.12.1 (redwoodjs#2579) Cache magic.link's token (redwoodjs#2555) build(deps): bump @babel/plugin-transform-runtime from 7.14.2 to 7.14.3 (redwoodjs#2603) build(deps): bump @types/node from 15.3.1 to 15.6.0 (redwoodjs#2601) eslint-plugin-import 2.23.2 with lint fixes (redwoodjs#2604) build(deps): bump @apollo/client from 3.3.18 to 3.3.19 (redwoodjs#2576) build(deps): bump apollo-server-lambda from 2.22.2 to 2.24.1 (redwoodjs#2580) build(deps): bump babel-plugin-graphql-tag from 3.2.0 to 3.3.0 (redwoodjs#2600) build(deps): bump @babel/cli from 7.13.16 to 7.14.3 (redwoodjs#2578) build(deps-dev): bump @types/lodash from 4.14.169 to 4.14.170 (redwoodjs#2597) build(deps-dev): bump @types/findup-sync from 2.0.2 to 4.0.0 (redwoodjs#2574) Aggregate Dependabot misc patch minor upgrades (redwoodjs#2596) CONTRIBUTING.md: add missing char (redwoodjs#2594) changes test command instructions to reference run-e2e instead of test-tutorial (redwoodjs#2593)

dac09 force-pushed the feat/graphql-codegen branch from 6f7b13e to 99ae71d Compare May 11, 2021 11:30

dac09 force-pushed the feat/graphql-codegen branch from 99ae71d to 8037df6 Compare May 11, 2021 11:39

dac09 changed the title ~~GraphQL Codegen~~ GraphQL Codegen for generating gql types May 11, 2021

dac09 added 4 commits May 11, 2021 12:44

Add generate types cli function | Automatically trigger in dev

7e55b4f

Setup watcher for generate types

8f33a50

Add commented out code for makeMergeSchema

b3d69d6

Remove unused imports

Forgot to add codegen deps

cc0bebe

dac09 force-pushed the feat/graphql-codegen branch from 5d8b034 to cc0bebe Compare May 11, 2021 11:44

dac09 added 2 commits May 11, 2021 15:58

Add types to tsconfig

07647f0

Remove prebuild tasks

4b44d71

All type generation now under rw g types Move watcher one level up, so it can be reused more easily for other actions

jtoar added topic/graphql topic/typescript labels May 18, 2021

jtoar added the v1-priority label May 19, 2021

jtoar assigned dac09 May 19, 2021

jtoar added this to the next-release-candidate milestone May 19, 2021

jtoar mentioned this pull request May 19, 2021

GraphQL #2557

Closed

dac09 added 7 commits May 20, 2021 13:36

Progress: query operation and mutation operation results are globals

fd13069

Generify graphqlHooksProvider

597c92d

Fix createCell types to avoid hacking OperationResult

3fef77c

Allow passing through of apollo error

cb91955

Update cell generator and template to have types

34e027f

Transform to js, when not a typescript project

52b5835

Bit of cleanup

9d5efe5

dac09 commented May 20, 2021

View reviewed changes

dac09 added 3 commits May 21, 2021 14:32

Update cell generator snapshots

22310cb

Merge template changes

36d669a

dac09 added 3 commits May 21, 2021 17:47

Update cell list template

9fe1ef2

Get tests working | add compute for readablity

1a67d1e

Update formatting on cell template

af6c749

dac09 requested a review from peterp May 21, 2021 17:21

dac09 marked this pull request as ready for review May 21, 2021 17:21

dac09 commented May 21, 2021

View reviewed changes

dac09 mentioned this pull request May 21, 2021

[RFC] Typed GraphQL #418

Closed

This was referenced May 21, 2021

useMutation options info is lost with new BYO gql client implementation #1532

Closed

GraphQLHookOptions - add refetchQueries type. #1751

Closed

dac09 added the needs-docs label May 24, 2021

peterp approved these changes May 24, 2021

View reviewed changes

dac09 added 4 commits May 24, 2021 11:12

PR Comments

b847c5d

Lint

c65c9e0

Sometimes vscode just needs a refresh 🤷

e02c4e6

dac09 merged commit 162daf5 into redwoodjs:main May 24, 2021

dac09 deleted the feat/graphql-codegen branch May 24, 2021 11:12

thedavidprice modified the milestones: next-release-candidate, next-release May 24, 2021

dac09 mentioned this pull request May 25, 2021

Change tsconfig to allow shared/user types by default #2452

Closed

jtoar mentioned this pull request May 25, 2021

Typescript - refetchQueries not typed #1752

Closed

dac09 mentioned this pull request May 25, 2021

[ts] POC type expansion for withCell #2222

Closed

peterp mentioned this pull request May 26, 2021

TypeScript #234

Closed

17 tasks

jtoar mentioned this pull request May 28, 2021

Using TypeGraphql to generate schemas instead of using gpl #802

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GraphQL Codegen for generating gql types #2485

GraphQL Codegen for generating gql types #2485

dac09 commented May 11, 2021 •

edited

Loading

github-actions bot commented May 11, 2021 •

edited

Loading

dac09 May 20, 2021

dac09 May 21, 2021

dac09 May 21, 2021

dac09 May 21, 2021

peterp left a comment

peterp May 24, 2021

dac09 May 24, 2021

dac09 May 24, 2021

peterp May 24, 2021

peterp commented May 24, 2021

		@@ -1,39 +1,43 @@
		import { useQuery, OperationResult } from './GraphQLHooksProvider'
		import { A } from 'ts-toolbelt'

GraphQL Codegen for generating gql types #2485

GraphQL Codegen for generating gql types #2485

Conversation

dac09 commented May 11, 2021 • edited Loading

What does it do?

Outstanding tasks:

github-actions bot commented May 11, 2021 • edited Loading

📦 PR Packages

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

peterp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

peterp commented May 24, 2021

dac09 commented May 11, 2021 •

edited

Loading

github-actions bot commented May 11, 2021 •

edited

Loading