package melange-react-query

  1. Overview
  2. Docs
React Query support for Melange

Install

Dune Dependency

Authors

Maintainers

Sources

0.1.0.tar.gz
md5=6be7a3b08107b7452d73367ed0a32303
sha512=1a4dcf1d2b82019fe05a86499ddc40b716f6affa4fc9d5474ff98cd27036b687cca28201e429b1770e76a49d2bdbbaf63cba21ce975ee9baa0c988925b427f5e

README.md.html

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),
      ()
    )
  );
OCaml

Innovation. Community. Security.