ygor perez Comments - Answer Overflow

Sorry I didn't fully comprehend what you said, could you give me an example or try explaining it in another way please? Are you talking about a parameter for how many items to retrieve?

7 replies

TtRPC

•Created by ygor perez on 5/9/2023 in #❓-help

how to persist the query client?

oh! for some reason I mixed useQueryClient with useQuery, thank you very much that was exactly what I needed, I read the bit of documentation in https://trpc.io/docs/migrate-from-v9-to-v10 "queryClient is no longer exposed through tRPC context", but for some reason flew over my head.

18 replies

TtRPC

•Created by ygor perez on 5/9/2023 in #❓-help

how to persist the query client?

I just can't access it

18 replies

TtRPC

•Created by ygor perez on 5/9/2023 in #❓-help

how to persist the query client?

but trpc already creates one right?

18 replies

TtRPC

•Created by ygor perez on 5/9/2023 in #❓-help

how to persist the query client?

Do you know if I would have to use the useQueryClient through RQ in all my procedures for the caching to work? Different queryClients different caches?

18 replies

TtRPC

•Created by Igor_lviv on 5/10/2023 in #❓-help

How to upload file not use S3 Next js? Please, example

this video might help you out: https://youtu.be/mxT3j-5s1Zc

4 replies

TtRPC

•Created by ygor perez on 5/9/2023 in #❓-help

how to persist the query client?

Thank you for the reply, yes I'm on NextJS 13 without the app directory.

import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

const localStoragePersister = createSyncStoragePersister({ storage: window.localStorage })
// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })

persistQueryClient({
  queryClient,
  persister: localStoragePersister,
})

import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

const localStoragePersister = createSyncStoragePersister({ storage: window.localStorage })
// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })

persistQueryClient({
  queryClient,
  persister: localStoragePersister,
})

This is how you use the persistQueryClient from the docs, I would like to know if there is a way to get the queryClient from TRPC in v10

18 replies

TTCTheo's Typesafe Cult

•Created by nyx5975 on 4/4/2023 in #questions

Clerk - multi-user login/profiles

Happy to help! Good luck with your project! 😁

21 replies

TTCTheo's Typesafe Cult

•Created by Perfect on 4/4/2023 in #questions

Zod - instanceof z.ZodError

Good to know!

5 replies

TTCTheo's Typesafe Cult

•Created by nyx5975 on 4/4/2023 in #questions

Clerk - multi-user login/profiles

Then in your middleware you could access that data and define if the user can access that page or not

21 replies

TTCTheo's Typesafe Cult

•Created by nyx5975 on 4/4/2023 in #questions

Clerk - multi-user login/profiles

Maybe you could use the userMetadata shown in here: https://clerk.com/docs/users/user-metadata

21 replies

TTCTheo's Typesafe Cult

•Created by Mads on 4/5/2023 in #questions

What is the convention for customizing sign-in pages in NextAuth

Happy to help!

12 replies

TTCTheo's Typesafe Cult

•Created by Mads on 4/5/2023 in #questions

What is the convention for customizing sign-in pages in NextAuth

if you have any problems with the sign in reach out to me again!

12 replies

TTCTheo's Typesafe Cult

•Created by Mads on 4/5/2023 in #questions

What is the convention for customizing sign-in pages in NextAuth

No problem Mads 😁 , I had some issues when I first tried to implement it myself too, the documentation isn't the clearest.

12 replies

TTCTheo's Typesafe Cult

•Created by Mads on 4/5/2023 in #questions

What is the convention for customizing sign-in pages in NextAuth

I heard that this path to the sign in page is a convention

12 replies

TTCTheo's Typesafe Cult

•Created by Mads on 4/5/2023 in #questions

What is the convention for customizing sign-in pages in NextAuth

src/pages/auth/signin.tsx

import { faSpotify } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { type Provider } from 'next-auth/providers'
import { getProviders, signIn } from 'next-auth/react'

interface SignInProps {
  providers: Provider[]
}

const SignIn = ({ providers }: SignInProps) => {
  return (
    <>
      <main className='flex min-h-screen w-full flex-col items-center justify-center bg-black'>
        {Object.values(providers).map(provider => (
          <div key={provider.name}>
            <button
              className='rounded-full bg-white p-4 text-xl transition-all delay-75 hover:scale-105 hover:bg-gray-200'
              onClick={() => void signIn(provider.id, { callbackUrl: '/' })}
            >
              {provider.name === 'Spotify' && (
                <FontAwesomeIcon
                  icon={faSpotify}
                  className='mr-4 rounded-full align-middle text-green-600'
                  size='2x'
                />
              )}
              Sign in with {provider.name}
            </button>
          </div>
        ))}
      </main>
    </>
  )
}

export const getServerSideProps = async () => {
  const providers = await getProviders()
  if (!providers) {
    throw Error('no providers found')
  }
  return {
    props: { providers },
  }
}

export default SignIn

import { faSpotify } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { type Provider } from 'next-auth/providers'
import { getProviders, signIn } from 'next-auth/react'

interface SignInProps {
  providers: Provider[]
}

const SignIn = ({ providers }: SignInProps) => {
  return (
    <>
      <main className='flex min-h-screen w-full flex-col items-center justify-center bg-black'>
        {Object.values(providers).map(provider => (
          <div key={provider.name}>
            <button
              className='rounded-full bg-white p-4 text-xl transition-all delay-75 hover:scale-105 hover:bg-gray-200'
              onClick={() => void signIn(provider.id, { callbackUrl: '/' })}
            >
              {provider.name === 'Spotify' && (
                <FontAwesomeIcon
                  icon={faSpotify}
                  className='mr-4 rounded-full align-middle text-green-600'
                  size='2x'
                />
              )}
              Sign in with {provider.name}
            </button>
          </div>
        ))}
      </main>
    </>
  )
}

export const getServerSideProps = async () => {
  const providers = await getProviders()
  if (!providers) {
    throw Error('no providers found')
  }
  return {
    props: { providers },
  }
}

export default SignIn

src/server/auth.ts

export const authOptions: NextAuthOptions = {
  session: {
    ...
  },
  callbacks: {
    ...
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    ...
    ],
  pages: {
    // this is what matters
    signIn: '/auth/signin',
  },
}

export const authOptions: NextAuthOptions = {
  session: {
    ...
  },
  callbacks: {
    ...
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    ...
    ],
  pages: {
    // this is what matters
    signIn: '/auth/signin',
  },
}

12 replies

TTCTheo's Typesafe Cult

•Created by Perfect on 4/4/2023 in #questions

Zod - instanceof z.ZodError

Maybe try extracting the coursePost to it's own schema? This is from the docs:

try {
  person.parse({
    names: ["Dave", 12], // 12 is not a string
    address: {
      line1: "123 Maple Ave",
      zipCode: 123, // zip code isn't 5 digits
      extra: "other stuff", // unrecognized key
    },
  });
} catch (err) {
  if (err instanceof z.ZodError) {
    console.log(err.issues);
  }
}

try {
  person.parse({
    names: ["Dave", 12], // 12 is not a string
    address: {
      line1: "123 Maple Ave",
      zipCode: 123, // zip code isn't 5 digits
      extra: "other stuff", // unrecognized key
    },
  });
} catch (err) {
  if (err instanceof z.ZodError) {
    console.log(err.issues);
  }
}

Your code seems right, have you tried passing random things to be parsed?

5 replies

Gaming

Programming