feat(scaffold/cell): Adds TypedDocument Support to Cell and Scaffold …

…Generators (#9693) Co-authored-by: Tobbe Lundberg <[email protected]>
redwoodjs · Dec 31, 2023 · d00e58e · d00e58e
1 parent f6638e4
commit d00e58e
Show file tree

Hide file tree

Showing 30 changed files with 495 additions and 161 deletions.
diff --git a/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.tsx b/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.tsx
@@ -1,10 +1,17 @@
 import type { FindAuthorQuery, FindAuthorQueryVariables } from 'types/graphql'
 
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
 
 import Author from 'src/components/Author'
 
-export const QUERY = gql`
+export const QUERY: TypedDocumentNode<
+  FindAuthorQuery,
+  FindAuthorQueryVariables
+> = gql`
   query FindAuthorQuery($id: Int!) {
     author: user(id: $id) {
       email

diff --git a/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.tsx b/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.tsx
@@ -3,11 +3,18 @@ import type {
   FindBlogPostQueryVariables,
 } from 'types/graphql'
 
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
 
 import BlogPost from 'src/components/BlogPost'
 
-export const QUERY = gql`
+export const QUERY: TypedDocumentNode<
+  FindBlogPostQuery,
+  FindBlogPostQueryVariables
+> = gql`
   query FindBlogPostQuery($id: Int!) {
     blogPost: post(id: $id) {
       id

diff --git a/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.tsx b/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.tsx
@@ -1,10 +1,17 @@
-import type { BlogPostsQuery } from 'types/graphql'
+import type { BlogPostsQuery, BlogPostsQueryVariables } from 'types/graphql'
 
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
 
 import BlogPost from 'src/components/BlogPost'
 
-export const QUERY = gql`
+export const QUERY: TypedDocumentNode<
+  BlogPostsQuery,
+  BlogPostsQueryVariables
+> = gql`
   query BlogPostsQuery {
     blogPosts: posts {
       id

diff --git a/__fixtures__/test-project/web/src/components/Contact/Contact/Contact.tsx b/__fixtures__/test-project/web/src/components/Contact/Contact/Contact.tsx
@@ -1,15 +1,20 @@
 import type {
+  DeleteContactMutation,
   DeleteContactMutationVariables,
   FindContactById,
 } from 'types/graphql'
 
 import { Link, routes, navigate } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
 import { timeTag } from 'src/lib/formatters'
 
-const DELETE_CONTACT_MUTATION = gql`
+const DELETE_CONTACT_MUTATION: TypedDocumentNode<
+  DeleteContactMutation,
+  DeleteContactMutationVariables
+> = gql`
   mutation DeleteContactMutation($id: Int!) {
     deleteContact(id: $id) {
       id

diff --git a/__fixtures__/test-project/web/src/components/Contact/ContactCell/ContactCell.tsx b/__fixtures__/test-project/web/src/components/Contact/ContactCell/ContactCell.tsx
@@ -1,10 +1,17 @@
-import type { FindContactById } from 'types/graphql'
+import type { FindContactById, FindContactByIdVariables } from 'types/graphql'
 
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
 
 import Contact from 'src/components/Contact/Contact'
 
-export const QUERY = gql`
+export const QUERY: TypedDocumentNode<
+  FindContactById,
+  FindContactByIdVariables
+> = gql`
   query FindContactById($id: Int!) {
     contact: contact(id: $id) {
       id
@@ -20,10 +27,14 @@ export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Contact not found</div>
 
-export const Failure = ({ error }: CellFailureProps) => (
+export const Failure = ({
+  error,
+}: CellFailureProps<FindContactByIdVariables>) => (
   <div className="rw-cell-error">{error?.message}</div>
 )
 
-export const Success = ({ contact }: CellSuccessProps<FindContactById>) => {
+export const Success = ({
+  contact,
+}: CellSuccessProps<FindContactById, FindContactByIdVariables>) => {
   return <Contact contact={contact} />
 }
diff --git a/__fixtures__/test-project/web/src/components/Contact/ContactForm/ContactForm.tsx b/__fixtures__/test-project/web/src/components/Contact/ContactForm/ContactForm.tsx
@@ -1,5 +1,6 @@
 import type { EditContactById, UpdateContactInput } from 'types/graphql'
 
+import type { RWGqlError } from '@redwoodjs/forms'
 import {
   Form,
   FormError,
@@ -8,7 +9,6 @@ import {
   TextField,
   Submit,
 } from '@redwoodjs/forms'
-import type { RWGqlError } from '@redwoodjs/forms'
 
 type FormContact = NonNullable<EditContactById['contact']>
 

diff --git a/__fixtures__/test-project/web/src/components/Contact/Contacts/Contacts.tsx b/__fixtures__/test-project/web/src/components/Contact/Contacts/Contacts.tsx
@@ -1,16 +1,21 @@
 import type {
+  DeleteContactMutation,
   DeleteContactMutationVariables,
   FindContacts,
 } from 'types/graphql'
 
 import { Link, routes } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
 import { QUERY } from 'src/components/Contact/ContactsCell'
 import { timeTag, truncate } from 'src/lib/formatters'
 
-const DELETE_CONTACT_MUTATION = gql`
+const DELETE_CONTACT_MUTATION: TypedDocumentNode<
+  DeleteContactMutation,
+  DeleteContactMutationVariables
+> = gql`
   mutation DeleteContactMutation($id: Int!) {
     deleteContact(id: $id) {
       id

diff --git a/__fixtures__/test-project/web/src/components/Contact/ContactsCell/ContactsCell.tsx b/__fixtures__/test-project/web/src/components/Contact/ContactsCell/ContactsCell.tsx
@@ -1,11 +1,18 @@
-import type { FindContacts } from 'types/graphql'
+import type { FindContacts, FindContactsVariables } from 'types/graphql'
 
 import { Link, routes } from '@redwoodjs/router'
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
 
 import Contacts from 'src/components/Contact/Contacts'
 
-export const QUERY = gql`
+export const QUERY: TypedDocumentNode<
+  FindContacts,
+  FindContactsVariables
+> = gql`
   query FindContacts {
     contacts {
       id
@@ -30,10 +37,12 @@ export const Empty = () => {
   )
 }
 
-export const Failure = ({ error }: CellFailureProps) => (
+export const Failure = ({ error }: CellFailureProps<FindContacts>) => (
   <div className="rw-cell-error">{error?.message}</div>
 )
 
-export const Success = ({ contacts }: CellSuccessProps<FindContacts>) => {
+export const Success = ({
+  contacts,
+}: CellSuccessProps<FindContacts, FindContactsVariables>) => {
   return <Contacts contacts={contacts} />
 }
diff --git a/__fixtures__/test-project/web/src/components/Contact/EditContactCell/EditContactCell.tsx b/__fixtures__/test-project/web/src/components/Contact/EditContactCell/EditContactCell.tsx
@@ -1,13 +1,21 @@
-import type { EditContactById, UpdateContactInput } from 'types/graphql'
+import type {
+  EditContactById,
+  UpdateContactInput,
+  UpdateContactMutationVariables,
+} from 'types/graphql'
 
 import { navigate, routes } from '@redwoodjs/router'
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
 import { useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
 import ContactForm from 'src/components/Contact/ContactForm'
 
-export const QUERY = gql`
+export const QUERY: TypedDocumentNode<EditContactById> = gql`
   query EditContactById($id: Int!) {
     contact: contact(id: $id) {
       id
@@ -18,7 +26,11 @@ export const QUERY = gql`
     }
   }
 `
-const UPDATE_CONTACT_MUTATION = gql`
+
+const UPDATE_CONTACT_MUTATION: TypedDocumentNode<
+  EditContactById,
+  UpdateContactMutationVariables
+> = gql`
   mutation UpdateContactMutation($id: Int!, $input: UpdateContactInput!) {
     updateContact(id: $id, input: $input) {
       id

diff --git a/__fixtures__/test-project/web/src/components/Contact/NewContact/NewContact.tsx b/__fixtures__/test-project/web/src/components/Contact/NewContact/NewContact.tsx
@@ -1,12 +1,20 @@
-import type { CreateContactInput } from 'types/graphql'
+import type {
+  CreateContactMutation,
+  CreateContactInput,
+  CreateContactMutationVariables,
+} from 'types/graphql'
 
 import { navigate, routes } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
 import ContactForm from 'src/components/Contact/ContactForm'
 
-const CREATE_CONTACT_MUTATION = gql`
+const CREATE_CONTACT_MUTATION: TypedDocumentNode<
+  CreateContactMutation,
+  CreateContactMutationVariables
+> = gql`
   mutation CreateContactMutation($input: CreateContactInput!) {
     createContact(input: $input) {
       id

diff --git a/__fixtures__/test-project/web/src/components/Post/EditPostCell/EditPostCell.tsx b/__fixtures__/test-project/web/src/components/Post/EditPostCell/EditPostCell.tsx
@@ -1,13 +1,21 @@
-import type { EditPostById, UpdatePostInput } from 'types/graphql'
+import type {
+  EditPostById,
+  UpdatePostInput,
+  UpdatePostMutationVariables,
+} from 'types/graphql'
 
 import { navigate, routes } from '@redwoodjs/router'
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
 import { useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
 import PostForm from 'src/components/Post/PostForm'
 
-export const QUERY = gql`
+export const QUERY: TypedDocumentNode<EditPostById> = gql`
   query EditPostById($id: Int!) {
     post: post(id: $id) {
       id
@@ -18,7 +26,11 @@ export const QUERY = gql`
     }
   }
 `
-const UPDATE_POST_MUTATION = gql`
+
+const UPDATE_POST_MUTATION: TypedDocumentNode<
+  EditPostById,
+  UpdatePostMutationVariables
+> = gql`
   mutation UpdatePostMutation($id: Int!, $input: UpdatePostInput!) {
     updatePost(id: $id, input: $input) {
       id

diff --git a/__fixtures__/test-project/web/src/components/Post/NewPost/NewPost.tsx b/__fixtures__/test-project/web/src/components/Post/NewPost/NewPost.tsx
@@ -1,12 +1,20 @@
-import type { CreatePostInput } from 'types/graphql'
+import type {
+  CreatePostMutation,
+  CreatePostInput,
+  CreatePostMutationVariables,
+} from 'types/graphql'
 
 import { navigate, routes } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
 import PostForm from 'src/components/Post/PostForm'
 
-const CREATE_POST_MUTATION = gql`
+const CREATE_POST_MUTATION: TypedDocumentNode<
+  CreatePostMutation,
+  CreatePostMutationVariables
+> = gql`
   mutation CreatePostMutation($input: CreatePostInput!) {
     createPost(input: $input) {
       id

diff --git a/__fixtures__/test-project/web/src/components/Post/Post/Post.tsx b/__fixtures__/test-project/web/src/components/Post/Post/Post.tsx
@@ -1,12 +1,20 @@
-import type { DeletePostMutationVariables, FindPostById } from 'types/graphql'
+import type {
+  DeletePostMutation,
+  DeletePostMutationVariables,
+  FindPostById,
+} from 'types/graphql'
 
 import { Link, routes, navigate } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
 import { timeTag } from 'src/lib/formatters'
 
-const DELETE_POST_MUTATION = gql`
+const DELETE_POST_MUTATION: TypedDocumentNode<
+  DeletePostMutation,
+  DeletePostMutationVariables
+> = gql`
   mutation DeletePostMutation($id: Int!) {
     deletePost(id: $id) {
       id

diff --git a/__fixtures__/test-project/web/src/components/Post/PostCell/PostCell.tsx b/__fixtures__/test-project/web/src/components/Post/PostCell/PostCell.tsx
@@ -1,10 +1,17 @@
-import type { FindPostById } from 'types/graphql'
+import type { FindPostById, FindPostByIdVariables } from 'types/graphql'
 
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
 
 import Post from 'src/components/Post/Post'
 
-export const QUERY = gql`
+export const QUERY: TypedDocumentNode<
+  FindPostById,
+  FindPostByIdVariables
+> = gql`
   query FindPostById($id: Int!) {
     post: post(id: $id) {
       id
@@ -20,10 +27,12 @@ export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Post not found</div>
 
-export const Failure = ({ error }: CellFailureProps) => (
+export const Failure = ({ error }: CellFailureProps<FindPostByIdVariables>) => (
   <div className="rw-cell-error">{error?.message}</div>
 )
 
-export const Success = ({ post }: CellSuccessProps<FindPostById>) => {
+export const Success = ({
+  post,
+}: CellSuccessProps<FindPostById, FindPostByIdVariables>) => {
   return <Post post={post} />
 }
diff --git a/__fixtures__/test-project/web/src/components/Post/PostForm/PostForm.tsx b/__fixtures__/test-project/web/src/components/Post/PostForm/PostForm.tsx
@@ -1,5 +1,6 @@
 import type { EditPostById, UpdatePostInput } from 'types/graphql'
 
+import type { RWGqlError } from '@redwoodjs/forms'
 import {
   Form,
   FormError,
@@ -9,7 +10,6 @@ import {
   NumberField,
   Submit,
 } from '@redwoodjs/forms'
-import type { RWGqlError } from '@redwoodjs/forms'
 
 type FormPost = NonNullable<EditPostById['post']>