traveloka-archive / react-diode Goto Github PK

Client side rendering and server side rendering

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)

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

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

To make sure every update doesn't break anything

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

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

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

Because Diode was created with server-side rendering in mind, Mutation is not implemented yet

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)

We need 100% test coverage

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

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

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

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

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);