开发者社区> 镜像站> NPM> jane-react-appsync
jane-react-appsync
React Appsync Wrapper
Last updated 2 years ago by jimji1005 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install jane-react-appsync 
SYNC missed versions from official npm registry.

jane-react-appsync

Install

npm install --save jane-react-appsync

Trying the example

after cloning, npm i in root folder go to example folder npm start a new tab in your browser should open with http://localhost:3000/ remember to add your janetoken

Usage

1. Apply main wrapper to App.jsx or Root

Please remember to include janetoken and pertaining information

import React, { Component } from 'react'

import { appSyncWrapper } from "jane-react-appsync";

class Example extends Component {
  render () {
    return (
      <AllConversations
        janetoken={'really_long_token'}
        sellerCompanyID={'Seller_company_id'}
        UserID={'current_user_id'}
      />
    )
  }
}

export default appSyncWrapper(App);

2. Apply wrapper to view that needs data

import React, { Component } from 'react'

import { AllConversationsQueryWrapper } from "jane-react-appsync";

class AllConversations extends Component {
  render () {

    if (this.props.error !== undefined) {
      // used to catch errors such as auth issues with invalid token
      return <div>{this.props.error.message}</div>
    }

    const { posts } = this.props;

    return (
      <table>...</table>
    )
  }
}

export default AllConversationsQueryWrapper(AllConversations);

3. To mutate do the following

import React, { Component } from "react";
import { NewConversationMutationWrapper } from 'jane-react-appsync';

class AddConversation extends Component {

  constructor(props) {
		super(props);
  }

  static defaultProps = {
		onAdd: () => null
  }

  handleAdd = () => {
		const { sellerCompanyId } = this.state;

		// if any not filled in stop process
		if (sellerCompanyId === '') {
			alert('Enter all data before proceeding');
			return false;
		}

		const janetoken = this.props.janetoken;

		this.setState(this.getInitialState(), () => {
			this.props.onAdd({ janetoken, sellerCompanyId });
		});
  }

  render () {

    return (
      <div>
          <label>SellerCompanyID
            <input
              type="text"
              placeholder=""
              value={this.state.sellerCompanyId}
              onChange={this.handleChange.bind(this, 'sellerCompanyId')}
            />
          </label>
          <button onClick={this.handleAdd}>Add new Conversation</button>
			</div>
    )
  }
}

export default NewConversationMutationWrapper(AddConversation);

Updating

To update, add new wrappers in src/index.js To update appsync config, update src/AppSync.js and if needed also src/client.js All mutations/query/subscription are located with in src/*

Current Tags

  • 0.0.26                                ...           latest (2 years ago)

1 Versions

  • 0.0.26                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (7)
Dev Dependencies (54)
Dependents (0)
None