feat(core): Leverage gql.tada for typings

examples/ecommerce/package.json

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

examples/spacex/package.json

@@ -17,7 +17,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@0no-co/graphqlsp": "^0.11.0",
+    "@0no-co/graphqlsp": "^1.0.1",
     "@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-canary-7986c5421362da3ff161beb2a2ed90c51fa04b27",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@0no-co/graphqlsp": "^0.11.0",
+    "@0no-co/graphqlsp": "^1.0.1",
     "@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

@@ -1,20 +1,20 @@
-import { FragmentType, graphql, useFragment } from '../fuse'
+import { FragmentOf, graphql, readFragment } from '../fuse'
 
 import styles from './PageNumbers.module.css'
 
-const TotalCountFields = graphql(`
+export const TotalCountFields = graphql(`
   fragment TotalCountFields on QueryLaunchesList {
     totalCount
   }
 `)
 
 export const PageNumbers = (props: {
-  list: FragmentType<typeof TotalCountFields>
+  list: FragmentOf<typeof TotalCountFields>
   limit: number
   offset: number
   setOffset: (x: number) => void
 }) => {
-  const node = useFragment(TotalCountFields, props.list)
+  const node = readFragment(TotalCountFields, props.list)
 
   if (!node.totalCount) return null