melange-react-query

Bindings to @tanstack/react-query for Melange.

Installation

opam install melange-react-query

Then add melange-react-query to the libraries field in your dune file:

(melange.emit ;; or (library ...)
 ...
 (libraries melange-react-query))

Usage

Provider.createClient()

The function responsible to create the query client

Usage:

  let client = Provider.createClient();

Provider.make()

The React Context Provider responsible to hold all the react-query context

  <Provider client> children </Provider>

DevTools.make(...)

The React Query DevTools Provider, which is responsible to initialize the React Query devtools

  <DevTools initialIsOpen={true} />

useQueryClient()

The queryClient fetched from a hook

  let queryClient = ReactQuery.useQueryClient();
  let queryResult = queryClient.fetchQuery(
    ReactQuery.fetchQueryOptions(
      ~queryKey=[|"articles"|],
      ~retryOnMount=true,
      (),
    )
  );

useQuery

  let queryResult = ReactQuery.useQuery(
    ReactQuery.queryOptions(
      ~queryKey=[|"articles"|],
      ~queryFn=fetchArticles,
      ()
    )
  );

useMutation

The hook responsible to mutate a query, when update/create/delete anything

  let mutationResult = ReactQuery.useMutation(
    ReactQuery.mutationOptions(
      ~mutationKey=[|"articles"|],
      ~mutationFn=(article) => addArticle(article),
      ()
    )
  );