@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

    Install

    npm i @itxbornfire/react-query

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    none

    Unpacked Size

    3.94 kB

    Total Files

    3

    Last publish

    Collaborators

    • itxbornfire