Example

Workflow with relay

try query some data

import { graphql, useLazyLoadQuery } from 'react-relay'

const App = () => {
  const data = useLazyLoadQuery(
    graphql`
      query AppQuery {
        taskConnection(first: 10) {
          edges {
            node {
              id
              content
              isDone
              createdAt
              updatedAt
            }
          }
        }
      }
    `,
    {}
  )

  return (
    <>
      App
    </>
  )
}

export default App

run pnpm relay to generate types

add types to query

import { AppQuery } from './__generated__/AppQuery.graphql'

const data = useLazyLoadQuery<AppQuery>(
)

console.log(data)

now your data got typed

render some list

return (
  <>
    <div>
      Task list
    </div>
    <ul>
      {data.taskConnection.edges.map(edge => {
        if (!edge?.node) return null

        return <li>{edge.node.content}</li>
      })}
    </ul>
  </>
)

Try it

run pnpm dev