I'm using apollo-client inside Next.js using the setup documented in this example.
To quickly explain, in getServerSideProps(), we create an apolloClient, we do the query and then we use addApolloState() to pass the cache data to the client. Then, inside a component, we can use useQuery() to get the data and render the UI for it.
This works perfectly for queries.
Now, I have a use case where I want my data to reload automatically when it changes on the server. To do this, I'd like to use Subscriptions. However, I still want to have the page rendered on the server on the first load with the right data.
What's the best way to achieve this?
I've tried the approach explained on this issue which consists in using subscribeToMore and override the whole query when a result arrives. However, it's not ideal as the subscription is still fired on the first page load and receives the same data than the one already in the cache.
Related
I have a Next.js app which has multiple pages. Each page has the same bar at the top of the screen which displays some data which is fetched from an internal API using SWR. The issue I am having is that to fetch that data it requires an ID of the logged in user (they log in with Discord via next-auth) and after they have left the first page, that ID value is no longer accessible to me.
I have tired storing it in local storage and session storage, I have tried passing it through other components, but nothing has worked and I am out of ideas of how to fix this. Is there any other way where I can pass a value between pages? Or is there a way I can access the session data again?
If you use this on all pages, you could just add that header into the _app.{js,tsx}(see the docs). In case you don't I suppose you create a layout component and reuse it across these pages.
In the future we might be able to use the new Routing API which allows passing adding Layout components for certain sub-routes. (Check the Layout RFC for more info).
because next js uses the react library so you can pass the data using props or you can use redux as well.
like this:
<Component propName={value}/>
I'm using next js with redux thunk.
And I want to fetch some global site data and save it to redux storage, so I could use it later in components.
The only way I can do it now - is to call action to fetch this globalData in every page in getInitialProps, But there are a lot of pages.
Is it possible to make this in _app.js, so I wouldn't have to repeat this in every page? What is correct way to do it?
P.S. Everything is easy with client side. The problem is about Server Side!
I need server to fetch data and put it to redux storage! And I need to do it for any page of site. (I don't care about what will happen next on client side)
I have an options page in my Chrome extension with a very large list of values that get saved to chrome.storage. These options get used across several different websites. In order to use the options I have to retrieve them in my content scripts that load on these websites.
I'm trying to figure out the best way to handle this. I'm fairly confident that once I get my options loaded during a session on a website that I would want to save them to sessionstorage or localStorage so that I can have quick synchronous access to them on subsequent page loads of that same site.
But the initial retrieval of those options is where I'm wondering what's the best method. My gut says to just make all of the asynchronous calls for each individual option from my content script at document_start and return a promise once I've retrieved them all using Promise.all().
My other idea was using message passing to talk to the background page where all of my options can already be available because I will have done the async calls when Chrome started or because I could just skip chrome.storage and store them in the background pages' localStorage. In this case, each different website that needs the options is just sending one message to the background page instead of making 40+ async calls to chrome.storage.
I have subscriptions users and product which give about 5000 and 7000 docs respectively. I use the data for typeahead searching in users and product forms. If we subscribe on form render, then the form takes too long to load so we subscribe on Meteor.startup, but that also makes our startup time slow.
How can we make the subscriptions run after the first screen is finished loading without touching the code for the first screen? I don't wanna do subscribe inside firstScreen.onRender() because there can be multiple first screens depending on the url entered.
I tried doing Meter.defer in Meteor.onStartup but that didn't work.
Alternatively, is there a better way to accomplish typeahead with semantic beyond loading all the data?
Any ideas?
I strong recommend you to use the Pattern 'Template-Level Subscriptions' to make sure that you have your data ready to your templates.
Here is the link that explain this -> https://www.discovermeteor.com/blog/template-level-subscriptions/
I hope that helps,
I have to mock up a ticking dashboard which is part of a proposal. I am looking for ideas other than the HTTP Refresh option that I am thinking of. The objective is to quickly mock up a look and feel and a working dashboard that ticks over. It only had to provide new content every five seconds. EG there are a bunch of KPI's and their outputs which are percentages have to be updated..
A simple bunch of HTML pages using HTTP Refresh is on my mind. Is there a better option anyoine can think of. EG can HTML5 do this better? Is CSS an option? Thank you in advance for any ideas
I would be going for an ajax call back to the server to get the latest update and then embed that wherever it needs to go - you could set the ajax function on a timer to run every 5 seconds or 1 second or whatever. This way your entire page is not being refreshed, and additionally you can be calling back to the server for a new update even while the previous on is still being rendered.
Downside is that you won't have a page history (i.e. the users will not be able to navigate 'back' to previous ajax updates) unless you explicitly create one; I can't see that being necessary though.
Please post a comment if you need more info about ajax.