Difference between "apollo-client-nextjs" and pure "apollo-client"

[BarrelRider]

Since there was no "discussion" section in repository, I wanted to open this topic to fill the gaps in my mind.

You see, I'm able to send query to my graphQL server like this

import { getClient } from "./ApolloClientRSC"
export default async function Home() {
const { data: projectsData } = await getClient().query({query: FETCH_PROJECTS})
}

I'm using "apollo-client-nextjs" above. But, I can even send my queries by using plain "apollo-client" in my RSC like below.

import client from "./ApolloClient"
export default async function Home() {
const { data: skillsData } = await client.query({query: FETCH_SKILLS})
const { data: projectsData } = await client.query({query: FETCH_PROJECTS})
}

This one, I'm not using "apollo-client-nextjs". Why should I use "apollo-client-nextjs" if I'm able to do it in plain "apollo-client" ?

What is the difference between "apollo-client-nextjs" and plain "apollo-client" at all ?

Thanks

[phryneas]

These two will behave very differently.

Your hand-written one will create one instance of ApolloClient that will be shared between all incoming requests and users. There are a few problems with that:

• sensitive data might leak between users
• the cache will never be emptied
  • it will grow forever and never free memory (you're in for a memory leak here!)
  • data might get very outdated

Generally, for all SSR purposes, we recommend to create a new instance of ApolloClient. That's what registerApolloClient and getClient do: every request will get a new instance of ApolloClient, and calling getClient multiple times during one request will give you the same instance every time.

Note that in RSC, you cannot create an ApolloClient instance in a component, hold it in state and pass it down in a provider manually, as in RSC neither state nor context exist.

Giving registerApolloClient also gives you the added benefit of PrefetchQuery - using RSC for fetching data and hydrating it in Client Components.