Git Product home page Git Product logo

react-diode's Introduction

Diode

CircleCI codecov.io

Endpoint agnostic, unidirectional data fetching for React application

Diode is an early project, expect breaking changes every (minor) version update.

Features

  • Unidirectional

    Data requirement flows one direction from child component to parent component so root component will know all data the child need. No more confusion where the data comes from (or what component should fetch what data) as root component data is the only source of truth.

  • Declarative

    Declare your data requirements declaratively, no need to manually call API in componentDidMount and use this.state to store data from server. All your data in component will be available as props.

  • Colocation

    Query next to views that rely on them. See your data requirement in the same place that your view resides.

  • Endpoint agnostic

    Every query will have its own endpoint and configuration on how to call them. You can use any HTTP-based endpoint, including REST and yes, GraphQL.

Install

$ npm install react-diode

Usage example

See /examples directory

Contributing

Publishing new version

react-diode is published semi automatically via GitHub Action. You just need to update the version in package.json via npm version and push to master alongside git tag.

# First pull latest master
git pull origin master

# Then determine the next version
npm version patch # for bugfix
npm version minor # for new feature
npm version major # for breaking change

# Push changes to GitHub 
git push origin master --follow-tags

License

MIT

react-diode's People

Contributors

dependabot[bot] avatar ferdinandant avatar juan-gunawan avatar pveyes avatar raibima avatar shandypd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-diode's Issues

Better BatchedQuery response resolution

Because there is no connection between one query and another, working with BatchedQuery is not pleasant. We need to generate response ourselves without using query resolver from each query definition, making this prone to error.

Ideally when we change how a query resolve a response, BatchedQuery type that depends on that query should automatically use the new response resolution from the updated query

No more __diodeResponse props

Currently DiodeContainer handles props transformation from __diodeResponse (generated from DiodeStore) to respective prop names specified by each container. This is ugly and restrict props usage outside container (for example in our app some props is used in cookies), accessing __diodeContainer makes it possible to break in future changes. We need to parse diode response into props directly in DiodeStore

Unit test

To make sure every update doesn't break anything

Client side implementation

Initially Diode was created to make data fetching in server side easier, the next logical step was to bring this capability to client-side. We need to:

  1. Replace default network layer to use fetch (with retries). This can copied blatantly from fbjs
  2. Add Diode.RootContainer which encapsulate all child queries and send them before render (we already have Diode.fetchData
  3. Calling React.render should trigger data fetching from RootContainer

We may also need to refactor response parsing, currently we render actual component by giving Diode container with diodeResponse props. This is ugly and and doesn't scale well

Special __additional property on BatchQuery

Internally we use this __additional property to fetch data outside scope. While this is generally a bad design, removing this feature would cause a lot of code change so we keep this for now and remove when the time is right

Example

Client side rendering and server side rendering

Add response shape transformer

Currently matching shape between fragment and query response is done manually. In most cases this works, but there is a possibility that a view may access a data that's not declared as requirement causing confusion.

In general this should works by matching the object shape from fragment and query response with special case is array (it should match the object shape inside the array whatever the length is)

Local cache

Allow caching response so next query with same fragment should not call multiple times. Fetch may already obeying 304 response but to receive the header, client still need to make a connection to server.

This should work both server side and client side. In server side we can use in memory, and in client side we can use localstorage

Multiple parallel query dependency

Currently Diode only support serial query dependency via Diode.waitForQuery, we need a way to do parallel query dependencies (probably via another API like Diode.waitForQueries, preferably single API)

Proposed solution:

export default {
  type: 'someQuery',
  request(fragment, params, options) {
    return Diode.waitForQueries([Query1, Query2], (q1, q2) => {
      // do something with resolved queries
    });
  }

DiodeStore is most likely to be affected by this change because currently we only map single query resolution into another query

Query dependencies

In Relay, each fields can have a resolve method to fetch from another data source. We need this capability in Diode where a query can have dependency to another queries (after fetching one query, recursively fetch query dependencies)

Enforce flow typecheck

Although the code already written with flow and flow-bin is already included in dependencies, but it's not actually typechecked. Add npm run typecheck script and fail the build if typecheck failed

More decoupled network layer

At the moment, DefaultNetworkLayer (and other custom network layer that implement the interface) know about query.resolve (https://github.com/traveloka/react-diode/blob/master/src/network-layer/DiodeDefaultNetworkLayer.js#L73) and how to return diode response correctly. I think it's better for network layer to just return array of response that DiodeStore will parse instead of forcing network layer to return with Map<queryType, queryResponse> that will make this difficult for any future changes

Add ability to mock query

Enable mock per queryType basis, or per payload. Also support bypassing mock entirely

Proposal

const queryMockMap = {
  queryType1: function (url, method, payload) {
    if (payload.id === 2) {
      return mockObject;
    }

    // return null/undefined to bypass mock
  }
  queryType2: function (url, method, payload) {
    // no payload checking, which means mock all query with this type
    return mockObject;
  }
}

Diode.useMockQuery(queryMockMap);

Isolated tests

At the moment the tests are not isolated (all module dependencies are not mocked yet), we need to make the tests isolated by mocking all module dependencies

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.