Reuse cache between data-related queries

[binajmen]

Hello! I'm using SWR + Supabase on NextJS.

// /pages/books

async function fetchBooks(_key: string) {
  const { data, error } = await supabase
    .from<Book>("books")
    .select();

  if (error) {
    throw error.message;
  }

  return data;
}
...
const { data } = useSWR("books", fetchBooks);

This is working well.

Now if I want to go to the edit page, I will require the data for that specific book:

// /pages/books/edit/[id]

async function fetchBookById(_key: string, id: string) {
  const { data, error } = await supabase
    .from<Book>("books")
    .select()
    .eq("id", id);

  if (error || data.length !== 1) {
    throw error?.message ?? "book not found";
  }

  return data[0]; // 
}
...
const { data } = useSWR("book", fetchBookById);

This is also working well, although I have a latency whereas the info should already be available in the cache (because of the books query that retrieved all books). Isn't it?

My questions are:

• How can I make the book query use the cache of books that already contain the book with the specified id?
• Could SWR be "aware" of that?
• Is there a way to somehow "link" queries?

Thanks for the help ! 🙏

[huozhi]

Thanks for providing the example
@binajmen So far the cache is key based so they're stored under different key. It's not easy to share. But it's a very nice idea that if the cache can be stored in better organized way, and re-use somehow. We'll put it in backlog and brainstorm it

[binajmen]

Thank you for your fast answer and for considering it in the brainstoming backlog 😉

[shuding]

I'm trying to reason about this as detailed as I can. Here are some more open questions :)

How can I make the book query use the cache of books that already contain the book with the specified id?

What happens if there is no cache of books, when book is being used? Say you have 2 components <Books> and <Book>, they can be rendered in any order.

The only option is to do the request itself for <Book> (supabase.from<Book>("books").select().eq("id", id)). But what happens when after that, <Books> is rendered? Should it override the book cache? What if they are different?

[binajmen]

Valid point! I should have said: "... because of the books query that supposedly already retrieved all books ..."

Should it override the book cache? What if they are different?

I'd say the data source should be the single version of the truth. If querying books implies changes on the data used by the component <Book id={1} />, these changes should be reflected in the component.

1. query book with id = 1 returns

{ id: 1, author: "Alice", title: "Alice in Wonderland" }

2. query books returns

[
  { id: 1, author: "Lewis", title: "Alice in Wonderland" },  <--- <Book id={1} /> component will update the author
  { id: 2, author: "Bob", title: "The Life of Bob Marley" },
]

I believe the only reason it would be out of sync would be if you mutate the cache without applying properly the changes in your data source (developer mistake, error, ...).