2

I was reading Redux Without Profanity and the author says the following:

The trend towards declarative data loading favours this model, mainly as this is easier to work with. Newer React frameworks such as Falcor, GraphQL and Resolver also batch and dedupe requests automatically. It's also possible to implement using plain Redux actions combined with autoaction.

The author uses "declarative data loading" somewhat nonchalantly, so I assumed it must be a widely known and extremely obvious term. However I googled it and didn't find much. Unfortunately the author assume this to be obvious prior knowledge. Please help!

Could somebody provide a quick explanation and example juxtaposing "declarative data loading" and your average http/ajax dataloading from, say, a simple MEAN stack todo list?

A.com
  • 1,466
  • 4
  • 19
  • 31

1 Answers1

1

The fundamental difference between declarative data loading and the http/ajax data loading is rooted in the difference between declarative and imperative programming. With declarative approach, you just mention what you need and that's all. On the othe hand, with imperative approach, you also need to tell the steps, i.e. how to get what you need.

Let's take a look at the following example of Relay's declarative data loading. It tells that for each faction, it wants these data: id, factionId, name, ships and also the data AddShipMutation wants for a faction. How the data are fetched is abstract.

fragments: {
  factions: () => Relay.QL`
    fragment on Faction @relay(plural: true) {
      id,
      factionId,
      name,
      ships(first: 10) {
        edges {
          node {
            id
            ${StarWarsShip.getFragment('ship')}
          }
        }
      }
      ${AddShipMutation.getFragment('faction')},
    }
  `,
},

For data loading with HTTP or AJAX, we have to specify how to get the data.

  1. make a request
  2. receive response
  3. extract data from response
  4. store the data

Hope this helps!

Ahmad Ferdous
  • 3,351
  • 16
  • 33
  • Thanks, Ahmad. It seems the "major" difference is you don't have a "parsing/extracting" step between requesting and storing? You still send off a request and you still need to receive a response and store it. You just don't have to parse the response because it is already how you need it? This is because the "request" and the "data extraction" are (in a way) in one big block (e.g graphQL query)...and the response needs no extracting, it is just ready to go into the props or a store? – A.com Jul 31 '16 at 14:11
  • Actually a bigger difference is that, with declarative data loading, we, the developers, don't have to worry about which request to make and how the request is made. We just 'declare' which data we want. Behind the scene, the required request is determined; there's a still a request being sent off, response received and parsed. – Ahmad Ferdous Jul 31 '16 at 16:39
  • GraphQL query is not one big block of request and data extraction. It does not know which request to make and how to make the request. A GraphQL query just expresses which data are wanted. You may find it easier to understand in the context of the client side. [Relay.js](https://github.com/facebook/relay) is a GraphQL-compliant client-side framework. Now, Relay abstracts the complexity of all communication with the GraphQL server, meaning, Relay will take the GraphQL query and do whatever it needs to do to fetch the needed data. – Ahmad Ferdous Jul 31 '16 at 16:46
  • From a high-level view, with declarative data loading, we do not need to think of how the data are made available to us. The framework abstracts this complexity. Compared to that, with imperative approach, we also have to deal with all things necessary to make the data available (logic to determine the appropriate request, how to request, handle response, store etc.). – Ahmad Ferdous Jul 31 '16 at 16:50