Comments (6)
@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.
from navi.
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)
from navi.
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.
from navi.
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.
from navi.
@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.
from navi.
No. Our requirements and architecture changed, so it wasn’t relevant anymore. Sorry
from navi.
Related Issues (20)
- How to set Context inside a route definition? HOT 1
- React Navi is failing in codesandbox.io HOT 2
- Browser router and nested memory router fighting over title
- "Active" prop and "activeStyle" props are broken for Link component HOT 1
- Bug with styles not being passed to Link. HOT 1
- How to match "/:id" and "/:id/edit"?
- navigation.subscribe callback called twice
- structured data isn't inserted into build
- canonical urls are wrong if lazy loading is used
- scroll restoration
- Disable prefetch globally HOT 1
- Why display:none !important? for any element
- How to create a custom boundary? How to catch custom errors?
- React.Strict mode forces the getData to run twice
- Error in Typescript blog example
- Preserve scroll position when going back/forward HOT 1
- build failed on node >= 12 HOT 1
- Is Navi dead? HOT 2
- Redux Toolkit with Navi
- Make docs searchable
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from navi.