Usage with apollo

[MrLoh]

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?

[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)

[MrLoh]

Yeah it's pretty straight forward to fetch with Apollo Client in the route. In server rendering with Apollo it is possible though to simply use apollo in child components wherever one wants and then apollo will extract everything into one query to send and provide the data into the nested tree, that's what getDataFromTree and renderToStringWithData does.

[jamesknelson]

Just had a look at the source of getDataFromTree().

It looks like it should work fine with Navi, but you'd need to set up a custom Navi renderer that uses renderToStringWithData() instead of the default renderToString().

There's a guide on custom renderers here: https://frontarm.com/navi/en/guides/static-rendering/#custom-renderers

Can you let me know if this works? If so, I think Apollo is important enough that it needs a page in the documentation. If this works, it might also be possible to make it work by default by detecting existence of the apollo-client package.

[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.

[hinok]

@MrLoh Did you find a way to integrate apollo with navi? If yes, could you share some of your experiences? What's working, what problems did you encounter etc.

[MrLoh]

No. Our requirements and architecture changed, so it wasn’t relevant anymore. Sorry