read cache on from server

[vincehi]

Hi, I'm using @urql/core ssr and I want to retrieve information from the server side cache. I can extractData, expose it in the window object, retrieve it on the client etc. but I don't know how to read the data from the server in order to extract a data to put it in the title tags before sending it back to the frontend. In fact, I can see the cache but it has a number on it that I can't guess. Is there a method to read the current cache from the server? I hope I made myself clear. Cdlt

[JoviDeCroock]

No entirely sure what you're meaning to do, however there are a few scenario's that come to mind. In a typical server-side rendering scenario we'll use the ssrExchange.

This is an exchange we'll use both on the server and the client, when used on the server we'll call extractData and it to a <script> tag on the window so we get the data-shape you describe:

{ [operation.key]: operationResult }

When you use this exchange on the client this will hydrate your local-cache with everything you have fetched on the server, this means that if you call useQuery on the client you'll get a synchronous result (won't hit your server with the fetchExchange) and this entry will now live in the client-side cache.

[viiiprock]

Hi, I'm migrating my app from Apollo to URQL, still a newbie here, currently I got from ssrCache.extractData() an object like
{"urqlState":{"1915891669":{"data":"{\"newestArticles\": ....}} and seems it works as expected, but how can my app consume that data since I don't know how to get the operation.key

[JoviDeCroock]

When you do ssrCache.extractData normally you'll inject this into a script-tag and this will be consumed on the client.

If you have a manual setup (not Next,...) you'll have to utilize the initialState parameter with this data within the script tag, this is all documented here

[viiiprock]

Yes, I'm using next and followed this example
Then when I'm trying to get from props. For example:

function Index ({urqlState, newestArticles}) { // I tried to get static props here
....
}

export async function getStaticProps(ctx: NextUrqlAppContext) {
  const ssrCache = ssrExchange({ isClient: false })
  const client = initUrqlClient(createUrqlClient(ssrCache, ctx), false)

  if (client) {
    await client.query(NEWEST_ARTICLES).toPromise()
  }

  return {
    props: {
      urqlState: ssrCache.extractData(), // => This one passed to script-tag but `undefined` on component props
      newestArticles: ssrCache.extractData(), // This one works
    },
  }
}

export default withUrqlClient(createUrqlClient, { ssr: false })(Index)

In fact, if I use newestArticles (which turns in to an object) as props

{newArticles: "1915891669": {data: "...."} }

I don't know how to get the 1915891669 to pass to my components, it may be not proper way if I get the data from the Object.keys method.

[JoviDeCroock]

function Index () {
  const [result] = useQuery({ query: NEWEST_ARTICLES })
}

export async function getStaticProps(ctx: NextUrqlAppContext) {
  const ssrCache = ssrExchange({ isClient: false })
  const client = initUrqlClient(createUrqlClient(ssrCache, ctx), false)

  if (client) {
    await client.query(NEWEST_ARTICLES).toPromise()
  }

  return {
    props: {
      urqlState: ssrCache.extractData(), // => This one passed to script-tag but `undefined` on component props
      newestArticles: ssrCache.extractData(), // This one works
    },
  }
}

You use the hook so urql can get it from the cache, the cache is an exchange so an operation will access it

[viiiprock]

seems like I misunderstood the idea behind, just thought simply get thing from pageProps, thanks @JoviDeCroock

[vincehi]

Yes, thank you, I put all this logic in place. I think my logic is not good for what I want to do. My idea was to be able to retrieve in extractData the data to hydrate the server side of my Layout (the title in this case). But I think my logic is not good. I'll rather transmit the data to my Layout from where I get it using streams for sure. Thanks for the answer