How to handle DateTime fields of type Date on the client-side (convert ISO string)

[bennettdams]

How do you handle fields of type Date on your client-side?

Imagine a field with DateTime in the schema. The Prisma Client with TypeScript shows the field of type Date later, but when you fetch the data client-sided, it will be serialized to an (ISO) string.

Here is a schema:

model Post {
  id             String       @id @default(cuid())
  createdAt      DateTime     @default(now())
  ..
}

The data is provided via a Next.js API route:

const post = await prisma.post.findUnique({ where: { id: postId } })
res.status(200).json(post)

...with a standard fetch:

async function fetchPost(postId: string): Promise<Post> {
  const response = await fetch(`${url}/${postId}`, {
    method: 'GET',
  })

  if (!response.ok) {
    throw new Error(response.statusText)
  }

  return await response.json()
}

...together with a custom hook and React Query:

export function usePost(postId: string | null) {
  const { data, isLoading, isError } = useQuery<Post>(
    [queryKeyPosts, postId],
    () => fetchPost(postId || ''),
    { enabled: !!postId }
  )
  const { create } = usePostsMutation()

  return { post: data || null, isLoading, isError, create: create.mutate }
}

I understand that I can easily convert the ISO string to a date, but where is the best place to do that?

This is a fairly simple example, but I'd need to do that for every schema model and every date field I'll ever use, right? There has to be a better way than manually creating dates after fetching on the client.