hustling to put the video out and get things sorted out right before the stand up , I know that race against time . Appreciate the Impeccable delivery.
There's bears everywhere, there's bears outside. I lost 3 neighbours this morning. So ...... it's very important to save your data ! hahahaha. Brilliant
Hi Leigh, thanks for another great video!! I knew you speak Spanish, but now seeing you drinking mate, I wonder if you have relatives in Argentina or Uruguay? Cheers from Uruguay btw ;)
React memo typically means don't re-render the component unless its props change or its internal state changes, so I think as long as one of those things occurs, you're good to go.
@@leighhalliday sorry if my question was vague described. Guess it's because I'm thinking of a more complex scenario that was a couple of questions to it. Haven't used react query but it seems to solve a couple of common issues I run into. Will try to describe the scenario I'm thinking of better. Say you have an API call that returns an large object that needs to be distributed to a lot of different components. Would you then put that state into a React.Context or dig it out queryCache? (1) If you need it to have it act like a pseudo webhook and set it to expire the cache frequently. How would you avoid rerender if the returned state is unchanged?(2) or only rerender the changed state.. - React.memo uses === so I don't expect it to work (but could be wrong) I'm very curious about the use of queryCache vs React.Context - sometimes we need to enrich the state that comes from the backend by making a derived state (doing some logic on the server state - like adding some state values together). Would you then go in and mutate your cache or save that in React.Context? (3)
Hey Leigh, Thanks I enjoyed the video. but there is one thing we can correct. the return value of "onMutate" is passed as 3rd argument to "onError" function. www.npmjs.com/package/react-query#usemutation so we need to set `queryCache.setQueryData('sightings', oldData)` inside "onError" fn. or we can return rollback function from onMutate, eg: return () => queryCache.setQueryData('sightings', current)
Hey Deepak, you're right! Someone had already mentioned it and I added a note in the description and updated the source code... unfortunately can't correct a video once it's published. Thanks :)
Thanks Leigh. It was really cool. I have a question which is somewhat related and it's about optimistic response in Apollo. Unlike react query which gives you the data you want to send to server, all I found on Apollo suggests I have to create the gibberish object - which will be added to query - myself. Is there any better approach or that's all I've got? BTW, stay home and there would be no worries about Covid-19 and also bears :p
Hey Morteza! Thank you! I'd love to answer but I haven't really done too much work with optimistic responses in Apollo... seems like something I should try to dig into and make a video about :) Staying as safe as I can haha!!
that was great, thanks but i have question i tried many times but querycach value is not read able i used quryclient instead const queryClient = new QueryClient(); and then queryClient.setQueryData but it did not work!!! even queryClient.setQueryData also did not work i dont know why can u help me
Seeing that you are responding to questions, is queryCache some version of global state object? Can I call it in different component and expect 'sightings'? If I had different api calls, will it create some kind of store?
Hey flagoon! Good question... honestly I'm not sure! I think it'd act as a global store, and would cause re-renders as long as you're using `useQuery` hook... but I think you'd have to give it a try :D
Got a doubt In the onMutate() callback query data was fetched on line 33 before the new sightings was added in line 35. But you are returning the current variable which was fetched before setting the new cached data. Could you please explain this concept. This might be a silly question but i would appreciate if you could give me an explanation
The value you return from onMutate (github.com/leighhalliday/next-prisma-demo/blob/master/pages/query.js#L39) is actually a function to be called if you want to "revert" the change. The actual update happens on line 34.
@@leighhalliday Just comparing the react-query API in your video vs SWR's, SWR seems way cleaner... I want those react-query-devtools for SWR though. 😭
Do you think react-query + Context can fully replace Redux in big apps ? The concept is great , but Redux data flow is very simple to debug and DevTools are a great tool when you have problems.
Hey Boris! Honestly not sure because I've never worked with a large Redux app :D I'd be tempted to say yes... typically the larger apps I've worked on are GraphQL, which I think has a sort of similar caching idea to react-query, but with implicit cache rather than explicit
Hello Leigh. I am working on next js project with custom server. Can i keep next api routes in pages folder and custom server separate or do i need to add api routes in custom server? I am only using custom server for socket.io and all the api routes are in pages/api folder. Your videos are great!!
Hi Leigh! Thanks for your very nice tutorial. I have an issue in the onError function.. I implemented just as you did, but when I force an error to occurs it keeps saying that rollback is not a function
Hey! It was an error on my part when I made the video... what you return should be a function, like here: github.com/leighhalliday/next-prisma-demo/blob/master/pages/query.js#L39
I did three examples, and I think two of them had subsequent GET requests: 1) I was calling "refetchQueries" which kicks off the additional GET request. 2) I wasn't calling refetchQueries... shouldn't be an additional GET request here. 3) This one in onSettled calls refetchQueries which kicks off an additional GET request. Basically the idea is to re-fetch, so that your UI has the latest data from server, rather than only relying on manually updating the cache.
Hi Leigh, Thanks for the video. Just letting you know, I think the code snippet at the end is incorrect (the return current statement should be return () => queryCache.setQueryData('todos', previousTodos)) src: github.com/tannerlinsley/react-query#updating-a-list-of-todos-when-adding-a-new-todo FYI: as of version 2 refetchQueries is invalidateQueries
I like 'em both, don't make me choose! Try them out and choose whatever you feel more comfortable with! Or go by the one that has a feature you need... or which has more repos using it (swr).
You can do a lot of your server side state or external data fetching with react-query, but it won't replace your app state. Take a look at my video "How I Manage State in React"
@@leighhalliday I have already watched that video. You used a mix of local state, global state and server side state to manage the app state rather than dumping all of this in a global store. I hope we could talk more about my issue. It would be a great help.
I would like to suggest you grab yourself a USB mic. You can 1000x improve the quality of the audio by investing $50 in a mic. I'm an audiophile/musician, so, I would drop a little extra cheese above $50 (ideally something with gain control). Would go a long way for the "watchability" of your channel, which, content-wise, is top-notch.
Hey Brian! I actually have this one here: www.rode.com/microphones/podcaster but I'm in a super tiny office without any noise cancelling, so I think the echoing is what's making it sound so bad. I'm recording with ScreenFlow, which doesn't give me too many options to correct (at least on my version), so I think I have to invest in some foam acoustic sound panels... any tips???
@@leighhalliday Ah, gotcha. Yeah, that's some echo... looks like you have a smooth/wooden floor in there too. Acoustic panels are a good start. Maybe put down a rug in there. Or try and bring the mic closer to your face with one of those mechanical arms? That way, it'll pick up the sound directly from your mouth more prominently than the reflections? Just one of those things you gotta "dial in". Good luck!
