Create framework independent client

[boschni]

Hi there! Would be an idea to create a simple framework (or at least hook independent) client for querying, mutating and caching? This would allow the client to also be used outside of a React context, while sharing the same cache, and still provide functionalities like optimistic updates. Like in redux actions or sagas for example. The React components and hooks could then be thin wrappers around this client. As a bonus, the client could even be used in different frameworks, although the library name does have react in it ;) I know the library is already somewhat setup like this with the queryCache, but maybe the API could be a bit more query and mutation oriented and presented as a "client".

const client = new QueryClient({
  cache: new QueryCache(),
  queries: { enabled: true }
})

ReactDOM.render(<QueryClientProvider client={client} />)

// Outside of React
const queryPromise = client.query('todos', fetchTodoList)
const queryObservable = client.watchQuery('todos', fetchTodoList)
const mutatePromise = client.mutate(updateTodo, { onMutate })

// Or in some component
const client = useQueryClient()

[tannerlinsley]

The groundwork for this is already being laid. You can see the separation of concerns in the source code with folders like core and react. While I am trying to work towards this, it's definitely a long way off because there is still so much value sitting in the React only code. Some of it may still be able to be ported, but some of it won't be. IMO, it wouldn't make much sense to integrate the React Query core with anything that doesn't have a component lifecycle or similar lifecycle since that is was powers a lot of the "when" for things happening. Obviously you could manufacture this "tick" without a component lifecycle, but it might defeat the purpose of the library.

[tannerlinsley]

I think the first logical step will probably be writing a Vue connector that essentially mimics the logic in the react directory, but using vue APIs. That will probably guide the agnostic journey in the right direction without jumping to far ahead.

[lifehackett]

Although I am using React, I have a different use case for why I think separating out the core logic would be useful.

Often times, there is logic in the query function that I don't want to require each of my components to define. Additionally, the keys and some of the config options I may want to protect. So my solution is to create an interface per entity/domain object for interacting with it that limits this exposure

Example:

import { useQuery } from 'react-query';
import { api } from 'services';
import Todo from './todo-model';

const key = 'todos';
function useTodos() {
  const get = useQuery(
    key,
    async () => {
      let { data: facilities } = await api.get('/todos');
      todos = todos.map(Todo.deserialize);
      return todos;
    },
    {
      cacheTime: 5 * 60 * 1000,
    }
  );

  return {
    api: {
      get: () => get,
    },
  };
}

export { useTodos };

The problem is that because of React's requirements for hooks being at the top level, there is no way for me to parameterize the get request. Understand if this doesn't aline with your vision for the library. Thanks for considering it.