mithrandir Posts

mithrandir

Posts Comments

TtRPC

•Created by mithrandir on 8/1/2024 in #❓-help

Next's app router is slow when using server components, how to optimize?

it takes about 3-4s to redirect to another page that fetches data using server caller, how to solve this?

2 replies

TtRPC

•Created by mithrandir on 7/9/2024 in #❓-help

multiple subscriptions in client side causing latency and failing to reload/redirect

jus the title

14 replies

TtRPC

•Created by mithrandir on 7/2/2024 in #❓-help

Subscription error: TRPCClientError: Subscriptions should use wsLink

this is my trpc client:

export const trpc = createTRPCNext<AppRouter>({
  /**
   * @link https://trpc.io/docs/v11/ssr
   */
  // ssr: true,
  // ssrPrepass,
  ssr: false,
  config({ ctx }) {
    /**
     * If you want to use SSR, you need to use the server's full URL
     * @link https://trpc.io/docs/v11/ssr
     */

    return {
      /**
       * @link https://trpc.io/docs/v11/client/links
       */
      links: [
        // adds pretty logs to your console in development and logs errors in production
        loggerLink({
          enabled: opts =>
            (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') ||
            (opts.direction === 'down' && opts.result instanceof Error)
        }),
        splitLink({
          condition: op => {
            return op.type === 'subscription'
          },
          true: wsLink({
            client: createWSClient({
              url: 'ws://localhost:3001'
            })
          }),
          false: httpBatchLink({
            transformer: superjson,
            url: `http://localhost:3000/api/trpc`
          })
        })
      ],
      /**
       * @link https://tanstack.com/query/v5/docs/reference/QueryClient
       */
      queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } }
    }
  },
  /**
   * @link https://trpc.io/docs/v11/data-transformers
   */
  transformer: superjson
})

export const trpc = createTRPCNext<AppRouter>({
  /**
   * @link https://trpc.io/docs/v11/ssr
   */
  // ssr: true,
  // ssrPrepass,
  ssr: false,
  config({ ctx }) {
    /**
     * If you want to use SSR, you need to use the server's full URL
     * @link https://trpc.io/docs/v11/ssr
     */

    return {
      /**
       * @link https://trpc.io/docs/v11/client/links
       */
      links: [
        // adds pretty logs to your console in development and logs errors in production
        loggerLink({
          enabled: opts =>
            (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') ||
            (opts.direction === 'down' && opts.result instanceof Error)
        }),
        splitLink({
          condition: op => {
            return op.type === 'subscription'
          },
          true: wsLink({
            client: createWSClient({
              url: 'ws://localhost:3001'
            })
          }),
          false: httpBatchLink({
            transformer: superjson,
            url: `http://localhost:3000/api/trpc`
          })
        })
      ],
      /**
       * @link https://tanstack.com/query/v5/docs/reference/QueryClient
       */
      queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } }
    }
  },
  /**
   * @link https://trpc.io/docs/v11/data-transformers
   */
  transformer: superjson
})