@rescriptbr/react-query

Installation // Getting Started // Supported Features // ReScript Brazil Community

:warning: This repo contains experimental bindings for @tanstack/query using the new optional fields API. If you're looking for bindings to the React Query v3 click here.

Installation

Install the package using npm/yarn:

yarn add @rescriptbr/react-query @tanstack/react-query

Add the package to bs-dependencies in your bsconfig.json:

{
"bs-dependencies": [
  "@rescript/react",
  "@rescriptbr/react-query"
 ]
}

Basic usage

module Fetch = {
  type response

  @send external json: response => Js.Promise.t<'a> = "json"
  @val external fetch: string => Js.Promise.t<response> = "fetch"
}

type todo = {id: string, title: string}

let apiUrl = "https://jsonplaceholder.typicode.com/todos/1"

let fetchTodos = (_): Js.Promise.t<todo> => {
  Fetch.fetch(apiUrl)->Promise.then(Fetch.json)
}

module TodoItem = {
  @react.component
  let make = () => {
    let queryResult = ReactQuery.useQuery({
      queryFn: fetchTodos,
      queryKey: ["todos"],
      /*
       * Helper functions to convert unsupported TypeScript types in ReScript
       * Check out the module ReactQuery_Utils.res
       */
      refetchOnWindowFocus: ReactQuery.refetchOnWindowFocus(#bool(false)),
    })

    <div>
      {switch queryResult {
      | {isLoading: true} => "Loading..."->React.string
      | {data: Some(todo), isLoading: false, isError: false} =>
        `Todo Title ${todo.title}`->React.string
      | _ => `Unexpected error...`->React.string
      }}
    </div>
  }
}

/*
 * Create a new client
 */
let client = ReactQuery.Provider.createClient()

@react.component
let make = () => {
  <ReactQuery.Provider client>
    <div>
      <h1> {React.string("ReScript + React Query")} </h1>
      <TodoItem />
    </div>
  </ReactQuery.Provider>
}

Checkout the compiler output

The JavaScript output is simple, very similar to the original API and *almost* zero-cost.

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as React from "react";
import * as ReactQuery from "@rescriptbr/react-query/src/ReactQuery.bs.js";
import * as ReactQuery$1 from "react-query";

var Fetch = {};

var apiUrl = "https://jsonplaceholder.typicode.com/todos/1";

function fetchTodos(param) {
  return fetch(apiUrl).then(function (prim) {
    return prim.json();
  });
}

function App$TodoItem(Props) {
  var queryResult = ReactQuery$1.useQuery({
    queryKey: "todos",
    queryFn: fetchTodos,
    refetchOnWindowFocus: ReactQuery.refetchOnWindowFocus({
      NAME: "bool",
      VAL: false,
    }),
  });
  var tmp;
  if (queryResult.isLoading) {
    tmp = "Loading...";
  } else if (queryResult.isError) {
    tmp = "Unexpected error...";
  } else {
    var todo = queryResult.data;
    tmp =
      todo !== undefined ? "Todo Title " + todo.title : "Unexpected error...";
  }
  return React.createElement("div", undefined, tmp);
}

var TodoItem = {
  make: App$TodoItem,
};

var client = new ReactQuery$1.QueryClient();

function App(Props) {
  return React.createElement(ReactQuery$1.QueryClientProvider, {
    client: client,
    children: React.createElement(
      "div",
      undefined,
      React.createElement("h1", undefined, "ReScript + React Query"),
      React.createElement(App$TodoItem, {})
    ),
  });
}

Supported features

These bindings are work in progress, check out the supported features:

• ✅ = Fully implemented
• ⬜ = Not implemented yet
• ⚙️ = Work in progress
• ⚠️ = Partially implemented

Hooks

• ✅ useQuery
• ✅ useQueries
• ✅ useMutation
• ✅ useInfiniteQuery
• ✅ useQueryClient
• ✅ useQueryErrorResetBoundary
• ✅ useIsFetching
• ✅ useIsMutating

Providers / Client / Core

• ✅ QueryClientProvider
• ⚙️ QueryClient
• ⚙️ QueryCache
• ⚙️ MutationCache
• ⚙️ QueryObserver
• ⚙️ InfiniteQueryObserver
• ⚙️ QueriesObserver
• ⚙️ QueryErrorResetBoundary

Functions / Helpers

• ⬜ focusManager
• ⬜ onlineManager
• ⬜ setLogger
• ⬜ hydration/Hydrate
• ⬜ hydration/useHydrate
• ⬜ hydration/hydrate
• ⬜ hydration/dehydrate

License

MIT