@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

Dependencies (1)

Dev Dependencies (0)

    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