Usage with apollo

Navi looks like a really neat little routing alternative. Our data always come from Apollo though which allows to fetch all data required in a whole react tree in server rendering with getDataFromTree is something like that possible with Navi?

[MrLoh]

@jamesknelson great, thanks for the explanation, I’m not sure when I will find time to try this out, as I’m on holiday in the next weeks, but I will let you know. If anyone want’s to try it in the the meantime, go ahead.

[jamesknelson]

Thanks 😃

I just read through Apollo’s SSR docs now so I’m not an expert at this, but one approach would be to pass the client into Navi via context, and then use client.query() method within your Navi routes.

let routes = mount({
  '/:id': route(async (request, context) => {
    let result = await context.client.query({
      query: `graphql goes here`,
      variables: { id: request.params.id },
    })

    return {
      view: <MyScreen result={result} />
    }
  })
})

let app = <Router routes={routes} context={{ client }} />

You could then get the cache and put it in the generated HTML using a custom renderer, so that the fetched data is immediately available on the initial render.

This approach has the benefit that the next route won’t be shown until the query has resolved. And if you want to subscribe and watch the query, then you can still pass the query through to the component via prop.

(I don’t have much experience with Apollo so I’d love to hear if what I’m saying makes any sense)