Let's say that we are displaying books grouped by author. The GET
request would look as follows:
// The server parses this like: author=['tolkien', 'shakespeare']
const data = useSWR('example.com/books?author[]=tolkien&author[]=shakespeare')
After having fetched this, the user now also wants to see the books written by another author. The easy thing to do here would be to fire off the following request:
const data = useSWR('example.com/books?author[]=tolkien&author[]=shakespeare&author[]=rowling')
Here data
includes all the books by Tolkien, Shakespeare and Rowling.
But we already have the books by Tolkien and Shakespeare, so fetching these again would be a waste. Instead it would make more sense to call the following:
const data = useSWR('example.com/books?author[]=rowling')
But here the books by Tolkien and Shakespeare are not included in data
.
Is it possible to call the following:
const data = useSWR('example.com/books?author[]=tolkien&author[]=shakespeare&author[]=rowling')
Where only the books by Rowling are actually fetched and are added to the 'example.com/books?author[]=tolkien&author[]=shakespeare&author[]=rowling'
key?
Similarly, let's say that we want to show only the books by Tolkien:
const data = useSWR('example.com/books?author[]=tolkien')
But calling the above would refetch Tolkien's books, even though we already have them...
What is the correct way to handle this scenario with SWR?