Query

To get the issues to populate, we’re going make a GraphQL query in the root page to get all the issues for the current user. You won’t have any issues in your DB at this point.

// gql/IssuesQuery
import { gql } from 'urql'

export const IssuesQuery = gql`
  query {
    issues {
      content
      createdAt
      id
      name
      status
    }
  }
`

And then in the issues page

// app/(dashboard)/page.tsx
'use client'
import { IssuesQuery } from '@/gql/issuesQuery'
import { useQuery } from 'urql'

const IssuePage = () => {
	const [{ data, fetching, error }, replay] = useQuery({
    query: IssuesQuery,
  })
  
  return (
	  // ....
	  {fetching && <Spinner />}
    {error && <div>error</div>}
    {data && data.issues.map((issue) => (
      <div key={issue.id}>
        <Issue issue={issue} />
      </div>
    ))}
  )
}