TanStack•2y ago•

1 reply

dead-brown

Pass initial data in a server component

Hi. I'd like to achive something like this using nextjs app router and tanstack query:

1. Root layout renders and fetches initial user vip level by session id from cookies
2. Root layout renders a

QueryClientProvider

QueryClientProvider

and passes just fetched level - lets say

bronze

bronze

to the provider
3. Client component somewhere else uses hook

useVipLevel

useVipLevel

which should never be

loading

loading

because there should be initial data passed on the first user enter even before client components render

How can I pass this initial data to query client and then make some type assertions inside

useVipLevel

useVipLevel

to tell the

useQuery

useQuery

that we always have data?

const MainLayout = async ({
  children
}: {
  children: React.ReactNode;
}) => {
  const vipLevel = await getVipLevel();

const MainLayout = async ({
  children
}: {
  children: React.ReactNode;
}) => {
  const vipLevel = await getVipLevel();

import { useQuery } from '@tanstack/react-query';
import { getVipLevel } from './get-vip-level';

export function useVipLevel() {
  return useQuery({
    queryKey: ['vip-level'],
    queryFn: getVipLevel
  });
}

import { useQuery } from '@tanstack/react-query';
import { getVipLevel } from './get-vip-level';

export function useVipLevel() {
  return useQuery({
    queryKey: ['vip-level'],
    queryFn: getVipLevel
  });
}

TanStack•2y ago•

1 reply

dead-brown

Pass initial data in a server component

Hi. I'd like to achive something like this using nextjs app router and tanstack query:

1. Root layout renders and fetches initial user vip level by session id from cookies
2. Root layout renders a

QueryClientProvider

QueryClientProvider

and passes just fetched level - lets say

bronze

bronze

to the provider
3. Client component somewhere else uses hook

useVipLevel

useVipLevel

which should never be

loading

loading

because there should be initial data passed on the first user enter even before client components render

How can I pass this initial data to query client and then make some type assertions inside

useVipLevel

useVipLevel

to tell the

useQuery

useQuery

that we always have data?

const MainLayout = async ({
  children
}: {
  children: React.ReactNode;
}) => {
  const vipLevel = await getVipLevel();

const MainLayout = async ({
  children
}: {
  children: React.ReactNode;
}) => {
  const vipLevel = await getVipLevel();

import { useQuery } from '@tanstack/react-query';
import { getVipLevel } from './get-vip-level';

export function useVipLevel() {
  return useQuery({
    queryKey: ['vip-level'],
    queryFn: getVipLevel
  });
}

import { useQuery } from '@tanstack/react-query';
import { getVipLevel } from './get-vip-level';

export function useVipLevel() {
  return useQuery({
    queryKey: ['vip-level'],
    queryFn: getVipLevel
  });
}

Pass initial data in a server component

Similar Threads

Pass initial data in a server component

Similar Threads

Similar Threads

Similar Threads