feat(core): Leverage gql.tada for typings (#119)

* implement gql.tada

* address issues

* make the changes

* make tada work

* leverage tada

* fixes

* changesets

* add basic docs aroudn types

* add some alias

* more doc additions

* doc additions

* Fix imports, remove duplicate imports

* fixes for comment json

---------

Co-authored-by: Max Stoiber <contact@mxstbr.com>

.changeset/cyan-ligers-reflect.md

@@ -0,0 +1,5 @@
+---
+'fuse': minor
+---
+
+Use `gql.tada` when the user has no prior codegen process

.changeset/perfect-glasses-kiss.md

@@ -0,0 +1,5 @@
+---
+'create-fuse-app': minor
+---
+
+Default to using `gql.tada`

examples/ecommerce/package.json

@@ -17,7 +17,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@0no-co/graphqlsp": "^0.11.0",
+    "@0no-co/graphqlsp": "^1.0.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

examples/ecommerce/schema.graphql

@@ -47,4 +47,4 @@ type Query {
   node(id: ID!): Node
   nodes(ids: [ID!]!): [Node]!
   product(id: ID!): Product
-}
+}

examples/spacex/fuse/graphql.ts

@@ -105,7 +105,7 @@ export type QuerySiteArgs = {
 
 export type QueryLaunchesList = {
   __typename: 'QueryLaunchesList'
-  nodes: Array<Launch>
+  nodes: Array<Maybe<Launch>>
   totalCount?: Maybe<Scalars['Int']['output']>
 }
 
@@ -139,9 +139,10 @@ export type Launches_SsrQuery = {
   launches: {
     __typename: 'QueryLaunchesList'
     nodes: Array<
-      { __typename: 'Launch'; id: string } & {
-        ' $fragmentRefs'?: { LaunchFieldsFragment: LaunchFieldsFragment }
-      }
+      | ({ __typename: 'Launch'; id: string } & {
+          ' $fragmentRefs'?: { LaunchFieldsFragment: LaunchFieldsFragment }
+        })
+      | null
     >
   } & {
     ' $fragmentRefs'?: { TotalCountFieldsFragment: TotalCountFieldsFragment }
@@ -158,9 +159,10 @@ export type Launches_RscQuery = {
   launches: {
     __typename: 'QueryLaunchesList'
     nodes: Array<
-      { __typename: 'Launch'; id: string } & {
-        ' $fragmentRefs'?: { LaunchFieldsFragment: LaunchFieldsFragment }
-      }
+      | ({ __typename: 'Launch'; id: string } & {
+          ' $fragmentRefs'?: { LaunchFieldsFragment: LaunchFieldsFragment }
+        })
+      | null
     >
   } & {
     ' $fragmentRefs'?: { TotalCountFieldsFragment: TotalCountFieldsFragment }
@@ -251,7 +253,7 @@ export type PageLaunchesQuery = {
   launches: {
     __typename: 'QueryLaunchesList'
     totalCount?: number | null
-    nodes: Array<{ __typename: 'Launch'; id: string; name: string }>
+    nodes: Array<{ __typename: 'Launch'; id: string; name: string } | null>
   }
 }
 

examples/spacex/package.json

@@ -17,7 +17,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@0no-co/graphqlsp": "^0.11.0",
+    "@0no-co/graphqlsp": "^1.0.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

examples/standalone/package.json

@@ -8,11 +8,12 @@
     "build": "vite build && fuse build"
   },
   "dependencies": {
+    "gql.tada": "1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@0no-co/graphqlsp": "^0.11.0",
+    "@0no-co/graphqlsp": "^1.0.2",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",

examples/standalone/src/App.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 
 import { graphql, useQuery } from './fuse'
-import { LaunchItem } from './components/LaunchItem'
-import { PageNumbers } from './components/PageNumbers'
+import { LaunchItem, LaunchFields } from './components/LaunchItem'
+import { PageNumbers, TotalCountFields } from './components/PageNumbers'
 import { LaunchDetails } from './components/LaunchDetails'
 
 export default function Page() {
@@ -23,17 +23,20 @@ export default function Page() {
   )
 }
 
-const LaunchesQuery = graphql(`
-  query Launches_SSR($limit: Int, $offset: Int) {
-    launches(limit: $limit, offset: $offset) {
-      nodes {
-        id
-        ...LaunchFields
+const LaunchesQuery = graphql(
+  `
+    query Launches_SSR($limit: Int, $offset: Int) {
+      launches(limit: $limit, offset: $offset) {
+        nodes {
+          id
+          ...LaunchFields
+        }
+        ...TotalCountFields
       }
-      ...TotalCountFields
     }
-  }
-`)
+  `,
+  [LaunchFields, TotalCountFields],
+)
 
 function Launches() {
   const [selected, setSelected] = React.useState<string | null>(null)
@@ -51,7 +54,7 @@ function Launches() {
           (node) =>
             node && (
               <LaunchItem
-                select={() => setSelected(node.id)}
+                select={() => setSelected('' + node.id)}
                 key={node.id}
                 launch={node}
               />

examples/standalone/src/components/LaunchDetails.tsx

@@ -1,21 +1,26 @@
 import { graphql, useQuery } from '../fuse'
-import { LaunchSite } from './LaunchSite'
+import { LaunchSite, LaunchSiteFields } from './LaunchSite'
 
-const LaunchDetailsQuery = graphql(`
-  query LaunchDetails($id: ID!) {
-    node(id: $id) {
-      ... on Launch {
-        id
-        name
-        details
-        launchDate
-        site {
-          ...LaunchSiteFields
+const LaunchDetailsQuery = graphql(
+  `
+    query LaunchDetails($id: ID!) {
+      node(id: $id) {
+        __typename
+        ... on Launch {
+          id
+          name
+          details
+          launchDate
+          __typename
+          site {
+            ...LaunchSiteFields
+          }
         }
       }
     }
-  }
-`)
+  `,
+  [LaunchSiteFields],
+)
 
 export const LaunchDetails = (props: { id: string; deselect: () => void }) => {
   const [result] = useQuery({

examples/standalone/src/components/LaunchItem.tsx

@@ -1,7 +1,7 @@
-import { FragmentType, graphql, useFragment } from '../fuse'
+import { FragmentOf, graphql, readFragment } from '../fuse'
 import styles from './LaunchItem.module.css'
 
-const LaunchFields = graphql(`
+export const LaunchFields = graphql(`
   fragment LaunchFields on Launch {
     name
     launchDate
@@ -10,11 +10,10 @@ const LaunchFields = graphql(`
 `)
 
 export const LaunchItem = (props: {
-  launch: FragmentType<typeof LaunchFields>
+  launch: FragmentOf<typeof LaunchFields>
   select: () => void
 }) => {
-  const node = useFragment(LaunchFields, props.launch)
-
+  const node = readFragment(LaunchFields, props.launch)
   return (
     <li className={styles.item} onClick={props.select}>
       <img className={styles.badge} src={node.image} alt={node.name} />

examples/standalone/src/components/LaunchSite.tsx

@@ -1,23 +1,25 @@
-import { FragmentType, graphql, useFragment } from '../fuse'
-import { Location } from './Location'
+import { FragmentOf, graphql, readFragment } from '../fuse'
+import { Location, SiteLocationFields } from './Location'
 
-const LaunchSiteFields = graphql(`
-  fragment LaunchSiteFields on Site {
-    id
-    name
-    details
-    status
-    location {
-      ...SiteLocationFields
+export const LaunchSiteFields = graphql(
+  `
+    fragment LaunchSiteFields on Site {
+      id
+      name
+      details
+      status
+      location {
+        ...SiteLocationFields
+      }
     }
-  }
-`)
+  `,
+  [SiteLocationFields],
+)
 
-// TODO: make pretty
 export const LaunchSite = (props: {
-  site: FragmentType<typeof LaunchSiteFields>
+  site: FragmentOf<typeof LaunchSiteFields>
 }) => {
-  const result = useFragment(LaunchSiteFields, props.site)
+  const result = readFragment(LaunchSiteFields, props.site)
 
   return (
     <div>

examples/standalone/src/components/Location.tsx

@@ -1,6 +1,6 @@
-import { FragmentType, graphql, useFragment } from '../fuse'
+import { FragmentOf, graphql, readFragment } from '../fuse'
 
-const SiteLocationFields = graphql(`
+export const SiteLocationFields = graphql(`
   fragment SiteLocationFields on Location {
     latitude
     longitude
@@ -10,9 +10,9 @@ const SiteLocationFields = graphql(`
 `)
 
 export const Location = (props: {
-  location: FragmentType<typeof SiteLocationFields>
+  location: FragmentOf<typeof SiteLocationFields>
 }) => {
-  const result = useFragment(SiteLocationFields, props.location)
+  const result = readFragment(SiteLocationFields, props.location)
 
   return (
     <div>

examples/standalone/src/components/PageNumbers.tsx

@@ -2,7 +2,7 @@ import { FragmentType, graphql, useFragment } from '../fuse'
 
 import styles from './PageNumbers.module.css'
 
-const TotalCountFields = graphql(`
+export const TotalCountFields = graphql(`
   fragment TotalCountFields on QueryLaunchesList {
     totalCount
   }