Query Wrapper ·

Spoiler alert: there is nothing similar/related to jQuery.

Query Wrapper is a TypeScript library based on React which can help you with handling server request states: loading, error or ready data state. The motivation has its roots in react-apollo Query React Component and useQuery React Hook. However, this library is oriented on RESTful web-services. Browser will care itself about the caching your data. When a web cache has a requested resource in its store, it intercepts the request and returns its copy instead of re-downloading from the originating server. You can find more information about HTTP caching here.

Installation

// using npm
npm i query-wrapper

// using yarn
yarn add query-wrapper

Documentation

<QueryProvider /> - React Context Provider. Optional global config provider.

Props:

• axios - optional configured axios instance function, which will be used as a base for the requests. If it is not provided every component will use native fetch by default. Default value: null.

• defaultOptions - object with options, which will be used in every request, unless they were are not overwritten. Default value: {}.

<Query /> - React Component. Used for making requests to a server. Optional.

Props:

• options - object for specifying request options (e.g. url, method, body, etc.). Note: At least url property must be provided, if it was not - request won't be sent. Default value: {}.

useQuery - React Hook. Used for making requests to a server.

Props:

• options - object for specifying request options (e.g. url, method, body, etc.). Note: At least url property must be provided, if it was not - request won't be sent. Default value: {}.

Examples

Wrapping the entire application into <QueryProvider /> is only useful when you have axios instance or default options you want be applied to all the requests. It's an optional step, you can ignore if you have do not have any props you want to provide. More examples you can find here: https://github.com/jeckvld/query-wrapper/tree/master/examples

import axios from 'axios';
import { QueryProvider } from 'query-wrapper';

const instance = axios.create({...});

const options = {
  credentials: "same-origin",
  headers: {
      "Content-Type": "application/json",
  }
};

export default function App() {
  return (
    <QueryProvider axios={instance} options={options}>
      ... // your application
    </QueryProvider>
  );
}

And then wrap your component which will deal with a server data:

import { Query } from 'query-wrapper';

const options = { url: '/api/user/info' };

export default function UserInfo() {
  return (
    <Query options={options}>
      {({ data, error, loading }) => {
        if (loading) {
          return ... // handle loading
        }

        if (error) {
          return ... // handle loading
        }

        return ... // handle response data
      }}
    </Query>
  );
}

Another option could be using useQuery hook instead:

import { useQuery } from 'query-wrapper';

const options = { url: '/api/user/info' };

export default function UserInfo() {
  const { data, loading, error } = useQuery(options);

  if (loading) {
    return ... // handle loading
  }

  if (error) {
    return ... // handle loading
  }

  return ... // handle response data
}