Sync up different dependent hooks

[pke]

I have this watchlist that the server returns and it contains products.
A product.is_liked indicates that the product is on the watchlist.

Then I have a useSearch hook which also returns a list of products, where the is_liked prop could be set.

My problem is to keep both cached data in sync on the client.
When I modify the watchlist on the server, naturally the cached result of the useSearch hook does not know about that. So the still mounted search result items still show the stale data for product.is_liked.

I know I could do a global mutate on the search key, unfortunately I don't know the key because it is a compound key: useSearch(["/search", searchTerm, limit], (path, { searchTerm, limit})
So I not simply call the unbound `mutate("/search")?

export function useWatchlist() {
  const { session } = useSession()
  const { data: watchlist, mutate, error } = useSWR<Product[]|undefined>(session?.userId ? ["/user/watchlist", session.id] : null, fix)

  const like = useCallback(async function(id: string) {
    if (session) {
      await put(`/user/watchlist/${id}`, session.id)
      mutate()
    }
  }, [mutate, session])

  const unlike = useCallback(async function(id: string) {
    if (session) {
      await del(`/user/watchlist/${id}`, session.id)
    }
    return mutate(watchlist?.filter((item) => item.id !== id), true)
  }, [mutate, session, watchlist])

  return {
    watchlist,
    loading: !watchlist && !error,
    loginRequired: !session?.userId,
    error,
    like,
    unlike,
  }
}


export function useSearch(searchTerm: string, limit?: number) {
  const { session } = useSession()
  const { data: results, error } = useSWR(
    session ? ["/search", session.id, searchTerm, limit] : null,
    (path, sessionId, searchTerm, limit) => post(path, sessionId, { searchTerm, limit }))

  return {
    results,
    error,
    loading: !results && !error,
  }
}

I also experimented with a virtual data storage like this:

export function useWatch(id: string):[boolean, () => void] {
  const { watchlist, like, unlike } = useWatchlist()
  const { data, mutate } = useSWR(["watchlist/", id], (_key, id) => watchlist?.find((item) => item.id === id))

  const toggle = useCallback(() => {
    if (data) {
      mutate({ ...data, is_in_watchlist: !data.is_in_watchlist })
      data.is_in_watchlist ? unlike(data.id) : like(data.id)
    } else {
      like(id)
    }
  }, [id, data, like, unlike, mutate])

  return [ !!data?.is_in_watchlist, toggle ]
}

Where the watch list items and search result items would all use useWatch with their respective product id.
However this did not work either.

Maybe I am just thinking to complicated or swr is not suited to solve such interdependencies.

[sergiodxa]

Check #525 (comment), there is a solution to mutate your keys when you don't know the exact key and only a part of them