Single page applications are a popular way of architecting modern front end applications. However, the biggest downside to client side rendering is...
For further actions, you may consider blocking this person and/or reporting abuse
Hey Angad, this looks good but doesn't work with the
getServerSideProps
in newer version of Next.To support that, It was required to split that apollo clinet HOC into two parts, one for provider and for one srr, as now. I have implemented that here. Will love to see suggestions and improvement tips on it.
Another option is to auto define the static prop on each
PageComponent
which does the SSR data extraction and then export that from each page.Hey Naman,
Thanks mate - I'll have a look at your repo and implementation now.
I believe there may be even more changes when Apollo v3 comes out of beta.
Cheers
I was able to extend this out a bit with getStaticProps and getStaticPaths:
Build time takes a bit but otherwise nice.
Thanks, that was useful!
So how would you use this with the api? export it the same way? I was able to do the dynamic routes pretty easy I also styled up the application as well but going the API route has been damn near impossible. github.com/MuddyBootsCode/tailswin...
Hey Michael.
I see you have dynamic routing implemented in your repo. Is this still an issue for you ? I'd happy to take a look and point you in the right direction. Let me know.
Some docs here for you reference : nextjs.org/docs/routing/dynamic-ro...
Thanks
Cheers Angad. Yep found that and was able to get it working. Now what I'm trying to do is get this to work with getStaticProps. I'm finding a lot of different implementations but this seems to be the most promising github.com/zeit/next.js/discussion... though it's not completely working for me and seems like it might be a bit over complicated at the moment. However, it does look like there's a lot of headway getting made quickly.
Hi, does it actually server render? My apollo cache seems empty after this setup, like described in the old issue from react-apollo-hooks: github.com/trojanowski/react-apoll...
So the page will be rendered in loading mode systematically with this approach.
For instance, what
apolloClient.cache.extract()
displays on your app?Yeah I don't think this is actually doing server side rendering, I tried github.com/adamsoffer/next-apollo-... instead and it worked
Hey Angad,
Great post, but is there a reason why this implementation seems quite a lot more complicated than the with apollo example on the NextJS repo (Found Here)?
The example in the above link simply creates an Apollo Client, passes this into the ApolloProvider which wraps the _app.js file and then uses getStaticProps inside of the pages which need it (index.js for example).
How come this example uses a fairly substantial apollo.js file?
I am facing an issue with Next.js v.9.4.4: "Error: Circular structure in "getInitialProps" result"
This is due to apolloClient being passed in getInitialProperties: the comment stating that: "As soon as this payload gets JSON.stringified it will remove itself." does not seems true anymore, or I missed something. Did you face that issue too?
Thanks a lot..! this post help me to finally get the graphql stuff.. gracias!!!
Welcome Miguelangel, I'm glad the post was helpful.
where did you obtain ‘withApollo’ section of code?
Thanks a lot coleague, run to first!!, u know any project to create mutations?
Thanks for the example.
I have a simple question I can't figure out. How do I set up a [id].js page so that I can use the id to make a query ?
Welcome Terje, You can setup dynamic routing using this : nextjs.org/docs/routing/dynamic-ro...
Hi Angad
How are you?
I just start working in react so it's a bit hard for me to understand the code of the lib file.it will be great if you please make a video on this or describe the code briefly
Hello Abubakar Afzal.
I am great thanks for asking. Hope you're well too.
Yes absolutely. Thats a great suggestion. I will make a video and describe these concepts shortly.
Thanks
Angad