[FEATURE]: add react query to project.. manage async state on watchlist page

[slackermorris]

So, what I want:

1. When I delete a Movie from the Watchlist I want the list to update in realtime.
2. When I add a Movie to the Watchlist, I want the list to update in realtime.

[slackermorris]

I can't achieve this currently because the page is rendered SSR and so I can't sync with the external datastore unless I refresh the page or copy all the async state into local state and manage it like that. Same amount of effort IMO.

[slackermorris]

Something to be considerate of: supposedly it doesn't work: https://stackoverflow.com/questions/74893370/react-query-does-not-work-with-astro-framework

[slackermorris]

I need to think about how it is going to be composed. At what level do I introduce it?

[slackermorris]

This is pretty much where I am: https://youtu.be/3Iz3D7cVi04?t=1912

[slackermorris]

I will have to convert the Astro components into React Components.

[slackermorris]

Why do I need to handle the case on first load... surely react-query handles this for me?

![Uploading Screen Shot 2023-11-28 at 8.34.44 PM.png…]()

[slackermorris]

I am having difficulty debouncing the searched movies now. Well, there are a tonne of difficulties TBH.

[slackermorris]

This is a helpful resource: does debouncing of the search term instead of the fetch as it is the search term that causes the query hook to be run.

• https://www.youtube.com/watch?v=Tmn3vpymg-4

[slackermorris]

Weird how my current solution uses debounce, which doesn't support Promises but I am using it to support them:

const debouncedSearch = useMemo(
    () =>
      debounce(async (query: string) => {
        // [ ]: use dev tools to return an error
        setResult({ status: "loading" });

        try {
          const results = await searchMovies(query);

          setResult({ status: "success", data: results });
        } catch (error) {
          setResult({ status: "error", error: error as unknown as Error });
        }
      }, 500),
    []
  );

[slackermorris]

I will try p-debounce and see if that changes anything.

[slackermorris]

Yup p-debounce worked a charm.

[slackermorris]

The next thing I have to do is convert the WatchlistMovies component into a React Component, so that it might make use of react-query.

[slackermorris]

Yeah, this means I pretty much have to convert everything into React Components now.

[slackermorris]

OK lets try to write a mutation for adding a Movie to the Watchlist.

[slackermorris]

I want the Watchlist Movies to reload when I add a Movie to the Watchlist. I think I am running into the same issue around the loading time being very short and so I can't depend on the isLoading prop enough to show a loading state.

[slackermorris]

Cool. I needed to check for isFetching. Next, I want to invalidate the Watchlist cache when I remove a Movie from the Watchlist.

[slackermorris]

OK. I remove an item from the Watchlist, do I want to call refetch? Or just manually invalidate the cache?

[slackermorris]

Do I need to deal with optimistic updates? I don't think so. The request returns very quickly.

[slackermorris]

I don't really like the complete reload. A UI which softens the act of removing something would be good.

[slackermorris]

Like, in removing a Movie from the Watchlist the cards sort of collapse on each other.

[slackermorris]

What makes removing the searched for movie from its list is that I am using a query key of "searchedMovies" > which means I would need to expose what the current searched for movie is and that state is currently just localised in the search field.

So, I am thinking that I just have the query key as "searchedMovies".

[slackermorris]

I think I should split this file up as well.

[slackermorris]

Instead of invalidateQueries I think I should be using setQueryData. Have a look at the videos here: https://tanstack.com/query/latest/docs/react/videos

[slackermorris]

For some reason, the cache for the searchedMovies is stale.