I have an Apollo server and trying to understand the best way to implement the apollo client for server components, obviously with client components you could just use the built in react hooks but I'm unsure how this should come together with a server component.

Heres my code:

/app/page.tsx

import { client } from "@/apollo";
import { graphql } from "@/gql";

const GET_GAMES_QUERY = graphql(`
  query GetGames {
    getGames {
      title
      id
    }
  }
`);
export default async function Home() {

  const data = await client.query({
    query: GET_GAMES_QUERY,
  });

  return (
    <div>
      {data.data.getGames.map((game) => (
        <h1 key={game?.id}>{game?.title}</h1>
      ))}
    </div>
  );
}

/apollo/index.ts

import { ApolloClient, InMemoryCache } from "@apollo/client";

export const client = new ApolloClient({
    uri: 'http://localhost:3000',
    cache: new InMemoryCache()
})

This seems to be working, but I know that next has a specific way of caching data and requests and want to ensure this setup adheres to its design.

If you have any insight on this lemme know. thanks!