fix: cookies usage on edge functions.

[thorwebdev]

Fixes #3

It's very important at what point you call the cookies method for things to work correctly.

So rather than handing the cookies method to the supabase client, we need to extract the value first, and then hand the supabase client a function that retrieves that value, e.g.:

'use server'
import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { Database } from '@/lib/db_types'

const cookieStore = cookies()
const supabase = createServerActionClient<Database>({
  cookies: () => cookieStore
})

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vercel-ai-chatbot	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 28, 2023 9:40am

[bradbitler]

thank you, this worked for me too.

[wojtekKrol]

This is not working for me,

im trying to call it inside of context.ts which later is passed to trpc context

// inner context
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { inferAsyncReturnType } from '@trpc/server'
import { FetchCreateContextFnOptions } from '@trpc/server/src/adapters/fetch'
import { cookies } from 'next/headers'

import { Database } from '@/database/databaseType'

// outer context
export async function createContextInner() {
  const cookieStore = cookies()
  const supabase = createRouteHandlerClient<Database>({
    cookies: () => cookieStore,
  })

  return {
    supabase,
  }
}

export async function createContext(opts: FetchCreateContextFnOptions) {
  const contextInner = await createContextInner()

  return {
    ...contextInner,
    req: opts.req,
    res: opts.resHeaders,
  }
}
export type Context = inferAsyncReturnType<typeof createContextInner>

const t = initTRPC.context<Context>().create({
  // const t = initTRPC.create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    }
  },
})

Still getting

Error: Invariant: cookies() expects to have requestAsyncStorage, none available.
    at cookies (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/headers.js:50:15)
    at createContextInner (webpack-internal:///(rsc)/./src/server/context.ts:15:78)
    at initServerClient (webpack-internal:///(rsc)/./src/server/index.ts:19:94)
    at eval (webpack-internal:///(rsc)/./src/app/_utils/api/serverClient.ts:7:79)
    at (rsc)/./src/app/_utils/api/serverClient.ts (/home/wkrol/NextBase-DevKit/.next/server/app/(routes)/(account)/todo/page.js:4453:1)
    at __webpack_require__ (/home/wkrol/NextBase-DevKit/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/(routes)/(account)/todo/page.tsx:10:85)
    at (rsc)/./src/app/(routes)/(account)/todo/page.tsx (/home/wkrol/NextBase-DevKit/.next/server/app/(routes)/(account)/todo/page.js:4340:1)
    at Function.__webpack_require__ (/home/wkrol/NextBase-DevKit/.next/server/webpack-runtime.js:33:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[nicitaacom]

This is not working for me,

im trying to call it inside of context.ts which later is passed to trpc context

// inner context
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { inferAsyncReturnType } from '@trpc/server'
import { FetchCreateContextFnOptions } from '@trpc/server/src/adapters/fetch'
import { cookies } from 'next/headers'

import { Database } from '@/database/databaseType'

// outer context
export async function createContextInner() {
  const cookieStore = cookies()
  const supabase = createRouteHandlerClient<Database>({
    cookies: () => cookieStore,
  })

  return {
    supabase,
  }
}

export async function createContext(opts: FetchCreateContextFnOptions) {
  const contextInner = await createContextInner()

  return {
    ...contextInner,
    req: opts.req,
    res: opts.resHeaders,
  }
}
export type Context = inferAsyncReturnType<typeof createContextInner>

const t = initTRPC.context<Context>().create({
  // const t = initTRPC.create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    }
  },
})

Still getting

Error: Invariant: cookies() expects to have requestAsyncStorage, none available.
    at cookies (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/headers.js:50:15)
    at createContextInner (webpack-internal:///(rsc)/./src/server/context.ts:15:78)
    at initServerClient (webpack-internal:///(rsc)/./src/server/index.ts:19:94)
    at eval (webpack-internal:///(rsc)/./src/app/_utils/api/serverClient.ts:7:79)
    at (rsc)/./src/app/_utils/api/serverClient.ts (/home/wkrol/NextBase-DevKit/.next/server/app/(routes)/(account)/todo/page.js:4453:1)
    at __webpack_require__ (/home/wkrol/NextBase-DevKit/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/(routes)/(account)/todo/page.tsx:10:85)
    at (rsc)/./src/app/(routes)/(account)/todo/page.tsx (/home/wkrol/NextBase-DevKit/.next/server/app/(routes)/(account)/todo/page.js:4340:1)
    at Function.__webpack_require__ (/home/wkrol/NextBase-DevKit/.next/server/webpack-runtime.js:33:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

For me as well

Collecting page data  ..Error: Invariant: cookies() expects to have requestAsyncStorage, none available

[nicitaacom]

is any updates how fix it?

If somebody fixed it - please share your solution here with code