Need private packages and team management tools?Check out npm Teams »

apollo-tote

2.0.0 • Public • Published

apollo-tote

👜 A declarative approach to handling Apollo queries in React

npm version

Installation

yarn add apollo-tote

or

npm install --save apollo-tote

Usage Examples

  • Fetch current user query. If an api token exists but is no longer valid (ie: cleared database), log user out.
<ApolloTote
    query={`
      query {
        user {
          id
        }
      }
    `}
    test={data => !!(data && data.user && data.user.id)}
    handleFail={() => Store.dispatch({ type: 'LOG_OUT' })}
    handlePass={() => Store.dispatch({ type: 'LOG_IN' })}
    renderError={error => this._renderError(error)}
    renderLoading={() => <App.Loading />}
    render={() => <App />}
/>
  • Render loading component until data comes back.
<ApolloTote
    query={`
      query {
        user {
          imageUrl
        }
      }
    `}
    renderLoading={() => <Avatar.Loading />}
    render={value => <Avatar imageUrl={value.user.imageUrl} />}
/>

PropTypes

  • skip: Boolean - Should we skip over query and just render?
  • query: String - Your graphql query
  • variables: String - Graphql query variables
  • test: Function (Optional) - helper to handle a successful query's response
  • handlePass: Function (Optional) - a function to render a successful test
  • handleFail: Function (Optional) - a function to render a failed test
  • renderError: Function - error function
  • renderLoading: Function - loading function
  • render: Function - a function that renders the result of your query

Keywords

Install

npm i apollo-tote

DownloadsWeekly Downloads

5

Version

2.0.0

License

MIT

Last publish

Collaborators

  • avatar