dumbitry Posts - Answer Overflow

dumbitry

•Created by dumbitry on 7/21/2023 in #questions

testing frameworks that work best with next 13 and the app router?

I'm interested in performing tests ("preferably integration") on entire app router pages. I'm having trouble doing so with next's built-in configuration for Jest, and I'm tired of digging through documentation and issues to find out what might be the cause of the problem. I think it'll be faster if someone points to something that has Just Worked.

5 replies

TTCTheo's Typesafe Cult

•Created by dumbitry on 7/6/2023 in #questions

Explicitly specifying an object in Prisma with its foreign relationships

I've set up my schema as an approximation of a directory structure: directories (ADirs) and documents (ADocs). Directories and documents can have a parent directory, which is a foreign key. I can write queries to retrieve directories and their children (childDirs, childDocs) without issue, but if I specify a directory as a state variable in a client component with useState, the type definition for ADir that I get from importing @prisma/clientdoes not have the children as a property. I've circumvented this issue by extending the type with my own interface, but I feel like it's a messy fix. Any tips? Thanks.

// helper for ADir object types that also need their children
// TODO: is there a better way to specify foreign objects in a type?
export interface ADirWithChilren extends ADir {
  childDirs: ADir[],
  childDocs: ADoc[]
}

// helper for ADir object types that also need their children
// TODO: is there a better way to specify foreign objects in a type?
export interface ADirWithChilren extends ADir {
  childDirs: ADir[],
  childDocs: ADoc[]
}

further reference: related libs are just next (using app router) and prisma. No trpc, zod, or superjson packages, but not against them if they are key to a good implementation.

9 replies

TTCTheo's Typesafe Cult

•Created by dumbitry on 7/3/2023 in #questions

performing server-side authentication with t3-app stack before rendering the index page

My root pages/index.tsx page is functioning as expected: a useSession() call is made to see if there's an active session, and either a splash page or a simple "you're logged in" message is shown depending on whether or not the user is authenticated.

import { useSession } from 'next-auth/react'
import Head from 'next/head'

import Splash from '~/components/Splash'
import LoggedIn from '~/components/LoggedIn'

export const Home = () => {
  const { data: session, status } = useSession()
  return (
    <>
      <Head>
        <title>App</title>
        <meta
          name="description"
          content="App description."
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      { status === "unauthenticated" ? <Splash/> : <></> }
      { status === "authenticated" ? <LoggedIn session={session}/> : <></> }
    </>
  )
}

export default Home

import { useSession } from 'next-auth/react'
import Head from 'next/head'

import Splash from '~/components/Splash'
import LoggedIn from '~/components/LoggedIn'

export const Home = () => {
  const { data: session, status } = useSession()
  return (
    <>
      <Head>
        <title>App</title>
        <meta
          name="description"
          content="App description."
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      { status === "unauthenticated" ? <Splash/> : <></> }
      { status === "authenticated" ? <LoggedIn session={session}/> : <></> }
    </>
  )
}

export default Home

However, my implementation has a clear flaw: by passing the page first, then performing authentication, my page is briefly displaying as blank before rendering the correct component. For this reason, I'm looking to authenticate on the server first, then return the right component with a server-side-rendered index page. I am guessing that the way to do this is to have the call to the root / be handled by a custom router first, which then passes the session data as a prop to the index page, but I'm not sure how to do so. My understanding is that pages/_app.tsx must render first, without the influence of a router before it, for the application to work. What do you suggest? For added context: I'm using all the tools scaffolded by t3-app related to this, meaning Next, tRPC, and NextAuth are in use.

3 replies

Gaming

Programming