Code Monkey home page Code Monkey logo

react-query's Introduction



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

react-query's People

Contributors

rescriptbr-admin avatar tomis avatar vinibispo avatar vmarcosp avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react-query's Issues

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?

Status for the pending bindings of Providers/Client/Core modules

Hi team, can someone help me with the status for the bindings of following work in progress modules-

Screenshot 2024-06-14 at 2 38 19 PM

We at @nammayatri are looking forward to use ReactQuery for one of our upcoming project. It would be helpful to update me with the status, if it's in backlog and can be picked by others. I can definitely allocate some assets here to get started with the pending bindings

Examples for mutations, queryClient?

Would it be possible to pad out the examples with mutations and their callbacks? I've been wrestling ReactQuery.useMutation({onSuccess: ...}) with queryClient (getQueryData, setQueryData etc) but failing to wrap my head around it.

QueryClient is listed as work in progress, but current version is 1.1.0. Can it be used?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.