I have Server Side Render set up, so every time an user visit a page, for example
mypage?query=one
nextjs will cache that value for all the user, which is of course wrong.
So even if the user will have
mypage?query=two
still nextjs router.query function will return the value one while asPath is correct (showing the current URL).
How can I, in a class component, update the cached version with the current query? Which lifecycle is more opportune to use?
Related
I have a page that utilizes the Apollo GraphQL useQuery hook to fetch data from several different sources. Some of that data is displayed on the page in a list, and some gets populated into select menus that the user can change in order to filter data on the page. I'm also using a simple React hook for persisting the users selections via the history.location.state object (specifically using React Router Dom). The hook is essentially this:
history.replace({
...history.location,
state: {
...history.location.state,
[key]: value,
},
});
The issue I'm running into is that whenever history.replace gets called all of the queries re-fetch data, even if nothing has changed and it should serve a cached result. I've been struggling to find any information around when and why the Apollo client decides to re-fetch and if there's anything I can do to avoid this – will Apollo by default respond to any changes to the history object and cause a re-fetch?
I have an app with react-router-dom and use the BrowserRouter component. In the app, I have route /query-builder that will essentially build a query string through picking values from tables etc. Once the user has the query string built, they can navigate to /search?q=<some querystring> via the useHistory() hook from react-router-dom and history.push('/search?q=${queryString}').
What I would like to know, is it possible to navigate back to the /query-builder route, via the browser back button, and see the page as it was just before I navigated to /search so the user could make amendments to the query. What I am seeing at the moment, is that the query-builder component will go back to its initial state, as it is mounting again.
I could use redux to manage the query builder state and rehydrate the components from that, but I am wondering am I missing something available in the react-router / react-router-dom packages?
Look like useContext is best variant to solve your problem. Save variables in query-builder, then you can easily go back without any scare) Also it'll work properly both in history.goBack() and browser back
First of all,
I am NEW to JS and React ( 3 months since I start learning JS ).
React Router v4 is used ( due to the course's restriction )
No Redux nor React Hooks used ( I didn't learn these yet )
If a user refreshes the window, it stays on the same address - I think it's technically the same as when you append keywords(route) on the address bar and push enter key - ( if you don't use redirect or anything modifies the route ), which has benefits on particular situations; however, the downside would be my case( not sure if it's actually true..please let me know if I am wrong ).
- I want to achieve three goals,
1a. the route path is matched to keyword state, which initial state is cats and which is the same as the user-input when a user submits an input value
2a. when a user refreshes the window, it goes back to initial componentDidMount state ( redirect to /cats )
3a. when a user types an address that does not exist, the 404 error component is rendered
- The issue I have to achieve those goals is,
1b. If I use Redirect to achieve "2a", and then if I type non-existing routes ( such as "/catsasldkja" ), it does not show 404 error component and redirects to /cats
2b. If I use Switch component to achieve "3a", it renders 404 error component as expected; however, it stays on the same address, so when a user is on the /cats address and refreshes the window, it works well, but when a user is on other routes(addresses) such as /dogs or /brandon, it renders the 404 error component: PageNotFound.js, because the keyword state is rolled back to initial state, which is cats, but the path is still on /brandon for instance, and the keyword state does not match to the route path, /cats so it renders 404 component
How can I possibly solve this issue?
Here is my Git Repo
and
Live Link
Thank you so much for your time in advance!
So i am trying to make it so when the user hit one of the profiles, they get pushed to the profile page of the user the click on.
I am using currently using this set of code:
const self = this;
browserHistory.push({
pathname: '/users/' + self.props.user.username,
state: {_id: self.props.user._id}
});
Which just enter the correct url in the url bar. Although, the page does not load/reload. So i manually have to reload the page to get into the userprofile
Thank you for your time and help
tl;dr
You have to use a router which works properly with Meteor, right now FlowRouter is the best option to go
Reloading the page is not the expected behavior when route changes in Meteor, only the content of the page should be change to match the new route. Because apps created by Meteor are Single-page application, meaning that all content/code of your app are loaded at your first load.
After the first load, all required code for your app to work are already in client so when route changes the required content will be compute and put on the page, no request will be send to server.
i'm trying to learn redux and i'm not sure what is best way to structure my app state when the app is used by multiple users.
App flow:
on every login {userid,username,token} is stored in localStorage.appUsers
now if my app initialState looks like following
{
appusers:[],//Array of app users, i only keep the token and id and username and i fetch the full user info from server when user is selected as current logged in.
currentUser:{id,fullname,picture,...etc} //current user
blog:[],//array of blog posts of current logged in user
chat:[],//array of chat messages of current logged in user
}
i use localstorage also to save the user state so that next time he open app, it present initialState from localstorage until it refresh the cache from server.
problem is that currently the blog and chat keeps array of posts for the current logged in user, when user switch users he is presented with someone else data.
so what is the correct approach to maintain separate store for every user ?
i tried to modify my initial state so that the blog and chat arrays become a property of appUsers, then i faced problem with react combineReducers which expects a key for every reducer in the initialState.