Trying to understand how SSR and Cache works

[qwexvf]

Right now i was thinking if when i have sever component like below i can reuse the fetched data on the client component when using useQuery hook

# this is server component
import { Pokemons } from "@/components/pokemons";
import { registerUrql } from "@urql/next/rsc";
import { Suspense } from "react";
import { cacheExchange, createClient, fetchExchange, gql } from "urql";

const makeClient = () => {
  return createClient({
    url: 'https://graphql.pokeapi.co/v1beta2',
    exchanges: [cacheExchange, fetchExchange],
  });
};

const { getClient } = registerUrql(makeClient);

const PokemonsQuery = gql`
  query {
    pokemon {
      id
      name 
    }
  }
`;

export default async function Home() {
  const result = await getClient().query(PokemonsQuery, {});
  console.log(result);

  return (
    <Suspense>
      <Pokemons />
    </Suspense>
  );
}

the client component

'use client'

import { gql, useQuery } from "@urql/next";

const PokemonsQuery = gql`
  query {
    pokemon {
      id
      name 
    }
  }
`;


export function Pokemons() {
  const [result] = useQuery({ query: PokemonsQuery, requestPolicy: 'cache-only' });

  console.log(result.data);

  return (
    <main>
      <h1>This is rendered as part of SSR</h1>
      <ul>
        {result.data.pokemon.map((x: any) => (
          <li key={x.id}>{x.name}</li>
        ))}
      </ul>
    </main>
  );
}

can any correct me on this? by doing this code i thought it would have the data fetched on the server component but it returns null

  const [result] = useQuery({ query: PokemonsQuery, requestPolicy: 'cache-only' });

[JoviDeCroock]

#3791 (comment)

[qwexvf]

Thank you for the fastest reply! ill check this (i thought i did a look up first ...my bad) and possibly close this q&a!

[JoviDeCroock]

No worries, was on my phone so wanted to edit but you replied fast 😅

[qwexvf]

No problem at all! thanks for the reply again!

i was wondering, can i still use Normalized Caching instead of the cache exchange with the ssr.restoreData ?

[JoviDeCroock]

Yes, so how the ssrExchange works is that it's just a dumb node in the exchange chain to re-hydrate data

SSR --> restores data in SSR-exchange when it hits the client
Client --> normalized/document cache exchange --> miss --> ssr --> hit --> cache writes it to storage and removes it from the ssrExchange

[qwexvf]

Thanks for clarifying this! It was very easy to understand, and I appreciate it!