With apollo and cache persist typescript

[adrianos10]

Hi, I couldn't find any example on how to integrate Apollo Client using TypeScript with Apollo cache persist (https://github.com/apollographql/apollo-cache-persist) so I've made one. Data that comes from SSR and data from runtime queries is persisted.

[shabnamoz88]

Hi, I couldn't find any example on how to integrate Apollo Client using TypeScript with Apollo cache persist (https://github.com/apollographql/apollo-cache-persist) so I've made one. Data that comes from SSR and data from runtime queries is persisted.

There is an issue here with this setup, because when SSR pages are loading in the browser, we would first see "Initializing..." as there isn't any client (waiting for cache)
so the whole purpose of having SSR is under question

I have resolved the issue by changing it to below useApollo:
(so useApollo is always returning a new apollo and when the component is mounted we are persisting the cache from browser and returning a new client.

`export const useApollo = (
props: PagePropsType,
): ApolloClient | undefined => {
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
}, [])

const getSessionStorageCache = async (cache: InMemoryCache) => {
// get persisted apollo cache from local storage
await persistCache({
cache,
storage: new SessionStorageWrapper(window.sessionStorage),
})
}

function initApolloClient() {
const cache = new InMemoryCache()

if (mounted) getSessionStorageCache(cache)

return createApolloClient(cache)

}

const client = initApolloClient()
rehydrateApolloWithServerState(client, props)
return client
}`

would like to know if anyone have better idea

[balazsorban44]

Hi, given the age of this PR and the recent discussion in #42771 (review) to cut down the number of Apollo examples we currently have, I am going to close this PR, but thanks anyway!