Hydrating client side cache?

[FezVrasta]

Hi, thanks for the POC, it's really awesome!

I noticed that if I run the same query on a RSC and on the client, the client will hit the graphql server even though the RSC has already fetched the required data.

Do you think it could be possible to have RSC components hydrate the client side Relay cache with the data they fetched so that client components can use it?

[tobias-tengler]

The POC currently doesn't support additional queries without loadStreamableQuery in client components. Could you share a concrete example of your case. Maybe we can look into it.

[FezVrasta]

Thanks for the answer Toabias!

I have these 4 components:

// list.server.tsx

export async function List() {
  const data = await getStreamableQuery<listQuery>(
    graphql`
      query listQuery {
        users {
          edges {
            node {
              id
              ...listItemUserFragment
            }
          }
        }
      }
    `,
    {},
  );

  return (
    <Card size="md" variant="elevated" m="$3">
      <Heading pb="$4">Server Side</Heading>
      {data.users.edges.map((item) => (
        <Suspense key={item.node.id} fallback={<div>🌀 Loading...</div>}>
          <ListItemUser userKey={item.node} />
        </Suspense>
      ))}
    </Card>
  );
}

// list-item.server.tsx
export async function ListItemUser({
  userKey,
}: {
  userKey: listItemUserFragment$key;
}) {
  const data = useFragment(
    graphql`
      fragment listItemUserFragment on User {
        email
        id
        name
      }
    `,
    userKey,
  );

  return (
    <Box py="$2">
      <Text>{data.email}</Text>
    </Box>
  );
}

// list.client.tsx

export function List() {
  const data = useLazyLoadQuery<listClientQuery>(
    graphql`
      query listClientQuery {
        users {
          edges {
            node {
              id
              ...listItemClientUserFragment
            }
          }
        }
      }
    `,
    {},
  );

  return (
    <Card size="md" variant="elevated" m="$3">
      <Heading pb="$4">Client Side</Heading>
      {data.users.edges.map((item) => (
        <Suspense key={item.node.id} fallback={<div>🌀 Loading...</div>}>
          <ListItemUser userKey={item.node} />
        </Suspense>
      ))}
    </Card>
  );
}

// list-item.client.tsx
"use client";

export function ListItemUser({
  userKey,
}: {
  userKey: listItemClientUserFragment$key;
}) {
  const data = useFragment(
    graphql`
      fragment listItemClientUserFragment on User {
        email
        id
        name
      }
    `,
    userKey,
  );

  return (
    <Box py="$2">
      <Text>{data.email}</Text>
    </Box>
  );
}

When I render both, I see client-side GraphQL queries firing from the client side components. But since they are querying the same data that was queried by the server side components I wonder if the cache could be used instead?

[tobias-tengler]

Can you try it with the Streamed Responses around the children in List like we're doing it here: https://github.com/tobias-tengler/relay-rsc-poc/blob/main/packages/example/src/app/page.tsx#L26

[FezVrasta]

Thanks, I don't see any difference adding that component around my list.server.tsx return