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

⚠️ 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

queryFn signature does not model fallibility for 'queryError

Problem

My queryFn returned promise.t has a result<'a, 'e>, but I 'queryError is completely disassociated.

queryFn: ReactQuery_Types.queryFunctionContext<'queryKey, 'pageParam> => Js.Promise.t<'queryData>

Discussion

As rescript users denote, Js.Promise is more or less worthless for modelling error types, which turns out is pretty critical for JS applications.

I'm currently using aantron/promise which at runtime is the practical mapping between this library's 'queryError and my 'e of result<'a, 'e>. The same could be said for ryyppy's or yawaramin's promise impl's as well.

I'm curious if there's a way to abstract the types here to satisfy the status quo, but also play nicely with result aware promise impls that care about modelling the error case. perhaps a GADT on the return type could be applicable and processed accordingly in the the useQuery impl?

rescriptbr / react-query Goto Github PK

react-query's Introduction

Installation

Basic usage

Supported features

Hooks

Providers / Client / Core

Functions / Helpers

License

react-query's People

Contributors

Stargazers

Watchers

Forkers

react-query's Issues

Problem

Discussion

Description

Problem

Discussion

Recommend Projects

Recommend Topics

Recommend Org