From my understanding, useParams hooks would allow me to take parameter from another route.
Why then do we need to do axios.get as well, to make the fetching work?
Isn't it also just fetching the data (params) available on an API?
See picture for examples.
Thank you, I appreciate your time.
Sorry I can't really follow your use case.
useParams() is a hook from react-router and its sole purpose is to return dynamic params from the current rendered URL in your React application. What you do then with this value is up to you and, of course, you can use it as a param to fetch data from an external API. But this fetching has nothing to do with useParams() (or react-router), you do that with axios or fetch() or whatever. useParams() doesn't make any AJAX call.
Apparently in your specific case the value of the id param in your rendered React route is the same value you use on a API (jsonplaceholder.typicode.com/posts) to retrieve a resource. That's fine, but it's a peculiarity in your application design and doesn't change the fact that the two params (the one in your rendered route and the one passed to the external API) are different, unrelated things.
Related
So I have the a dynamic route lets say it is "exercise/[id]/". When this route is accessed I take that id from the url like this:
const router = useRouter()
const id = router.query.id
Then I run a SWR fetch (client side fetching) hook to fetch some data from the server with the provided id.
If the user types an id that doesn't exist in the server or if they typed an invalid id like some letters and characters, what's the right way to handle this situation? And is there a way to redirect the user to the default next's 404 page?
What you are describing is not possible in a purely client-side rendered environment.
If you are getting data from the URL, you should be able to server-side render the page and return a 404 before the page ever gets client-side rendered.
If SSR isn't an option, you have to return an entirely different component client-side based on the SWR output. At that point you're not returning a true 404 (as far as the network status code) and would just be rendering a different component based on your API's output.
https://nextjs.org/docs/api-reference/data-fetching/get-static-props#getstaticprops-return-values
If you CANNOT server-side render, then you would have to conditionally render a different component/set of components based on the SWR output. That is entirely dependent on how your code is set up, and even that would not be a true 404 if that matters to you.
Next.JS layouts can be used to persist page state, but apparently not API calls. The docs say to use SWR or useEffect to fetch data on page layouts, but this is a bad experience for data that is static, such as data that goes into a footer. For example, fetching a street address for a footer should not be done on the client, but on the server.
With all that being said - is it possible to call getStaticProps on a layout? Or is there another way to fetch data server-side for a layout?
You can only use Next.js data fetching methods inside of Next.js "page files" (files inside ./pages/ or ./src/pages/.
Layout components can't use these methods; however, they CAN expect props to be passed to them in a certain way.
So, while you can't add data fetching logic to the reusability of a Layout component, you can require props such that devs will need to use a data fetching method to provide the props as the layout component expects.
I have a question about calling API in react.
Example in the website. We have a lot of page. Each page has a lot of components. And each component has its own data need to get in server.
I see we have two way to call API is:
First. We call all API of each page in a root of each page then set the data to state. After that, we pass data to children Component.
Second. In each component, we call its API to get its data then set the data to component 's state.
So which is better. I need an explain about that.
Thanks you,
There are many ways to pass Data through out the components.
If the application is small and there are small number of child components you can go by making calls in Root folder.
There would be some components that always doesn't render and only rendered based on specific conditions at this point you can go by making calls from that component.
Using redux and redux thunk is always an option if the data is needed in many components and data can be accessed at any point of time.
As noted in the previous answers/comments you could do either one of these. If you plan to use redux it might be easier to chain the api calls in a single action w/ thunk that gets ran on main component load.
Context or Redux would do you well so you don't have to pass tons of data through prop levels.(prop drilling)
I would suggest Redux, IMO context gets too cluttered and by the time you've properly atomized your code to clean up everything you may as well have just went through the overhead of adding redux.
What you should ask yourself is-
Does it make sense to have all this data load at the same time?
Is it appropriate for some api calls to be made from the components that will use them?
You have creative license to do what works best for you.
With nextjs 10, you can have a catch all route, which looks something like this [...id].tsx. The idea is that this will allow for dynamic pages. So it should match /example, /example/new, /example/new/latest etc.
The issue im facing is that a specific matched routes (for example /example/new) may need extra data in order to correctly render. Seeing as i only really have one file in my pages folder, i only have access to one getStaticProps call. Fetching all possible data for all possible routes seems quite wasteful.
Server side data fetching at the component level would solve his issue but this doesn't seem to be a supported feature in nextjs
Is there a recommended way around this? Conditional data fetching based on context inside getStaticProps ? 🤔
Where you should fetch data depends on the nature of your data. Also, when a user needs the data. You can use getStaticProps, getServerSideProps or fetch data on the client-side. See documentation to learn differences between the methods.
I'm new to React and I'm trying to figure out the best way to request information from the server based on the URL. I'm using Redux and React Router v4.
Let's say I have a route /foo/:id, and a component Foo that will render something based on id. However Foo needs some server data related to id to do so. I believe the way to accomplish this would be to use mapDispatchToProps to create a function that takes id as input, does some async work, dispatches an action, and ultimately updates the redux state.
My question is: where is the most appropriate place to invoke the dispatch? In this scenario, there's no form submission or button click to kick things off. Originally I was thinking of including a check for the id data in render() and fetching if it was not populated, but this felt wrong due to the side effects.
You can do it in componentDidMount of the Foo component, similar to this example from the Redux GitHub project.
Your intuition is right that render is not a good place to do so. Most people do it in the componentDidMount lifecycle method of the component.
On a relevant note, you will also want to do fetching also in the componentWillReceiveProps method like what they did here. Reason being if your user navigated from foo/1/ to foo/2/, the component is already on the screen and will not be mounted again, hence componentDidMount will not be called again. The fetching for the second user will be done in the componentWillReceiveProps method.
i think the best way to do the dispatch inside the componentWillReceiveProps() which would help you fetch some data before the component renders
It seems your use case is well-captured by the react-refetch package which you can find here. It provides a higher-order component that allows you to specify dependencies at specific API endpoints and then resolves them when a new instance of your component is created.
Importantly it injects the data into your components props using a synchronous abstraction of a promise called a PromiseState. This will allow you to conditionally render your component depending on whether the data is say pending, fulfilled, rejected, etc.
This is not attached in any way to Redux, it skips that layer entirely, so do keep it in mind that the response is directly injected into the component and does not go through your redux store's state.