@itxbornfire/react-query

1.0.1 • Public • Published

@itxbornfire/react-query

From Tim's article, and the codesandbox he peovided, this is how a basic component should look like. Of course you can style it as you wish as shown here https://codesandbox.io/s/92n5zmoq2y?from-embed .

  import React, { Fragment } from "react";
  import { Query } from "@itxbornfire/react-query";
  
  import {
    LoadingComponent,
    ErrorComponent
  } from ".../path/to/your/components";

  export const BasicQuery = () => (
    <Fragment>
      <h2>BasicQuery</h2>
      <Query url="https://api.github.com">
        {({ state: { data, loading, error }, actions }) => {
          if (loading) {
            return <LoadingComponent />;
          }

          if (error) {
            return <ErrorComponent error={error} />;
          }

          if (data) {
            return (
              <React.Fragment>
                <button onClick={actions.fetch}>
                  Reload
                </button>
                {
                  //render your data
                }
              </React.Fragment>
            );
          }

          return null;
        }}
      </Query>
    </Fragment>
  );
  

Here's an interactive sandbox, the original sandbox by Tim himself.

Edit 92n5zmoq2y

Package Sidebar

Install

npm i @itxbornfire/react-query

Weekly Downloads

0

Version

1.0.1

License

none

Unpacked Size

3.94 kB

Total Files

3

Last publish

Collaborators

  • itxbornfire