Usage

Steps:

1. Create QueryClient or MobxQueryClient

@/shared/lib/mobx/query/index.ts

import { QueryClient } from "@tanstack/query-client";

export const queryClient = new QueryClient()

2. Create MobxQuery or MobxMutation

import { MobxQuery, MobxMutation } from 'mobx-tanstack-query';
import { queryClient } from "@/shared/lib/mobx/query";

export const fruitsQuery = new MobxQuery({
  queryClient,
  queryKey: ['fruits'],
  queryFn: async () => {
    const response = await fetch('/api/fruits');
    return await response.json()
  }
});

export const addFruitMutation = new MobxMutation({
  queryClient,
  mutationFn: async () => {
    const response = await fetch('/api/fruits', { method: 'POST', data: { name: 'fruit' } });
    return await response.json()
  },
  onSuccess: () => {
    fruitsQuery.invalidate();
  }
});