Gary, el Pingüino Artefacto Comments

Gary, el Pingüino Artefacto

Explore posts from servers

RRailway TtRPC TTCTheo's Typesafe Cult XXata DTDrizzle Team

Posts Comments

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

thats enought to get ssr working

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

i called makeQueryClient on the server and use a HydrationBoundary with the prefetch

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

"use client"

import type { ReactNode } from "react"
import { isServer, QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"

let browserQueryClient: QueryClient | undefined = undefined

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60,
        gcTime: 1000 * 60 * 60 * 24,
      },
      mutations: {
        onSuccess: async () => {
          await browserQueryClient?.invalidateQueries()
        },
      },
    },
  })
}

function getQueryClient() {
  if (isServer) {
    return makeQueryClient()
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient()
    return browserQueryClient
  }
}

export function ReactQueryClientProvider(props: { children: ReactNode }) {
  const queryClient = getQueryClient()
  return (
    <QueryClientProvider client={queryClient}>
      {props.children}
      <ReactQueryDevtools />
    </QueryClientProvider>
  )
}

"use client"

import type { ReactNode } from "react"
import { isServer, QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"

let browserQueryClient: QueryClient | undefined = undefined

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60,
        gcTime: 1000 * 60 * 60 * 24,
      },
      mutations: {
        onSuccess: async () => {
          await browserQueryClient?.invalidateQueries()
        },
      },
    },
  })
}

function getQueryClient() {
  if (isServer) {
    return makeQueryClient()
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient()
    return browserQueryClient
  }
}

export function ReactQueryClientProvider(props: { children: ReactNode }) {
  const queryClient = getQueryClient()
  return (
    <QueryClientProvider client={queryClient}>
      {props.children}
      <ReactQueryDevtools />
    </QueryClientProvider>
  )
}

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

this is mine

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

it will still be ssr if thats what you are asking

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

you will still need the "use client" directive when using react query

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

yes

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

the prefetch/hydrate and the initial data di exactly the same thing

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

so only the data is sent

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

i haven't try it, i think it just send the promises and resolve it on the client

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

It's kinda annoying but I prefer it than passing props

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

yes

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

initialData makes prop drilling

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

We also try to put "use client" only on the "leaves" components

35 replies

TTCTheo's Typesafe Cult

•Created by jalen21 on 10/25/2024 in #questions

Can I combo Tanstack query and Server component on Nextjs?

I do it, we prefetch the queries on the server and the hydrate them on the client to achive pooling/realtime data

35 replies

TTCTheo's Typesafe Cult

•Created by Gary, el Pingüino Artefacto on 10/14/2024 in #questions

Applying drizzle migrations with Hono

After some hours, I managed to solve it. For anyone with the same issue, use the path module.

    const folder = path.join(process.cwd(), "src", "databases", "tenants", "migrations")

    const folder = path.join(process.cwd(), "src", "databases", "tenants", "migrations")

I also added this on the next.conf, Idk if it is necesary but xd

experimental: {
  outputFileTracingIncludes: {
    "/api/hono/[[...routes]]": ["./src/databases/tenants/migrations/**/*"],
    "/api/hono/tenants/create": ["./src/databases/tenants/migrations/**/*"],
  },
},

experimental: {
  outputFileTracingIncludes: {
    "/api/hono/[[...routes]]": ["./src/databases/tenants/migrations/**/*"],
    "/api/hono/tenants/create": ["./src/databases/tenants/migrations/**/*"],
  },
},

and

webpack: (config, { isServer }) => {
  if (isServer) {
    if (process.env.VERCEL_ENV === "production") {
      execSync(`curl -X GET ${process.env.VERCEL_URL}/api/hono/tenants/create`)
    }
  }
  return config
},

webpack: (config, { isServer }) => {
  if (isServer) {
    if (process.env.VERCEL_ENV === "production") {
      execSync(`curl -X GET ${process.env.VERCEL_URL}/api/hono/tenants/create`)
    }
  }
  return config
},

3 replies

TTCTheo's Typesafe Cult

•Created by Noor on 3/2/2024 in #questions

Best Chart/Graphs React Library

https://mantine.dev/charts/getting-started/

7 replies

TTCTheo's Typesafe Cult

•Created by Gary, el Pingüino Artefacto on 2/20/2024 in #questions

React Grid Layout automatic detection

Some like this maybe:

type Widget = {
  id: string
  type: "data" | "chart" | "list" | "table"
}

type Layout = {
  i: string
  x: number
  y: number
  w: number
  h: number
}

type Layouts = {
  xs: Layout[]
  sm: Layout[]
  md: Layout[]
  lg: Layout[]
  xl: Layout[]
  "2xl": Layout[]
}

export const widgetsToLayout = (widgets: Widget[]): Layouts => {
  // Magic here...
}

type Widget = {
  id: string
  type: "data" | "chart" | "list" | "table"
}

type Layout = {
  i: string
  x: number
  y: number
  w: number
  h: number
}

type Layouts = {
  xs: Layout[]
  sm: Layout[]
  md: Layout[]
  lg: Layout[]
  xl: Layout[]
  "2xl": Layout[]
}

export const widgetsToLayout = (widgets: Widget[]): Layouts => {
  // Magic here...
}

5 replies

Gaming

Programming