On the one hand we have the code that fetches data from the backend. It starts with axios… (e.g. axios.get<Post> etc). But, once we get the data, we want to cache it.
queryKey is a name for data stored in the cache
Enter queryKey. Its job is to give the incoming data from the backend a suitable name to store the incoming data in the cache. We can name it however we want! However, we don’t want to name the data just anything. We want to give it some structure and organization for code scalability and debugging purposes. Why not then follow the naming structure of APIs like users/1/posts - or just posts? That way it has a logical structure and is easy to recognize in React Query dev tools (We’ll especially need this organization when creating lots of queries)
queryKey acts as a dependency
On top of serving as a name for the incoming data, queryKey also works as a kind of dependency when adding variables into the name. If the variable in the name changes React Query fetches new data from the backend.
