[Falcor] Intro to JSON Graph

JSON is a very commonly used data interchange format. Unfortunately while most application domain models are graphs, JSON is designed to model hierarchical information. To get around this problem, Falcor introduces JSON Graph. JSON Graph introduces references to JSON, allowing you to ensure that no object appears more than once in your JSON.

 

Let say we have a json data to repersent a recently watched list and newly relesase list, in both lists, there is one item is the same:

genreList: [
                    {
                        name: 'Recently Watched',
                        titles: [
                            {
                                id: 5221,
                                name: "House of Cards",
                                rating: 4.5
                            }
                        ]
                    },
                    {
                        name: "New Releases",
                        titles: [
                            {
                                id: 5221,
                                name: "House of Cards",
                                rating: 4.5
                            }
                        ]
                    }
                ]

 

Then in recently watched list, I want to give "House of Cards" 5 rating:

model.setValue('genreList[0].titles[0].rating', 5)
                .then(function (value) {
                    model.get('genreList[0..1].titles[0]["name","rating"]')
                            .then(function (json) {
                                console.log(JSON.stringify(json, null, 3));
                            })
                });

Here we set the rating as '5', then we print out the list again:

{
   "json": {
      "genreList": {
         "0": {
            "titles": {
               "0": {
                  "name": "House of Cards",
                  "rating": 5
               }
            }
         },
         "1": {
            "titles": {
               "0": {
                  "name": "House of Cards",
                  "rating": 4.5
               }
            }
         }
      }
   }
}

 

As we can see from the result, the first item is rated as 5, but the second item still renaming 4.5 . But they reperesnt the same item, what we want my rating can affect the item's rating all lists. 

 

But with json, it is hard to do that. That's why we need JSON Graph.

 

You can convert a json object into a jon graph in two step:

1. Each json repersent item should have a unqie id, then you can use the unqie id as key to map object.
2. Replace the original data with the json graph ref.

cache: {
                titleById: {
                    5221: {
                       // id: 5221,
                        name: "House of Cards",
                        rating: 4.5
                    }
                },
                genreList: [
                    {
                        name: 'Recently Watched',
                        titles: [
                            {$type: 'ref', value: "titleById[5221]"}
                        ]
                    },
                    {
                        name: "New Releases",
                        titles: [
                            {$type: 'ref', value: "titleById[5221]"}
                        ]
                    }
                ]
            }

5221 is the unqie id to repersent the json object. 

 

Actually there is a helper method can help to refactor the code:

cache: {
                titleById: {
                    5221: {
                       // id: 5221,
                        name: "House of Cards",
                        rating: 4.5
                    }
                },
                genreList: [
                    {
                        name: 'Recently Watched',
                        titles: [
                            $ref("titleById[5221]")
                        ]
                    },
                    {
                        name: "New Releases",
                        titles: [
                            $ref("titleById[5221]")
                        ]
                    }
                ]
            }

 

----------------------------------------

 

<!-- index.html -->
<html>
<head>
    <!-- Do _not_  rely on this URL in production. Use only during development.  -->
    <script src="//netflix.github.io/falcor/build/falcor.browser.js"></script>
    <script>
        var $ref = falcor.Model.ref;
        var model = new falcor.Model({
            cache: {
                titleById: {
                    5221: {
                       // id: 5221,
                        name: "House of Cards",
                        rating: 4.5
                    }
                },
                genreList: [
                    {
                        name: 'Recently Watched',
                        titles: [
                            $ref("titleById[5221]")
                        ]
                    },
                    {
                        name: "New Releases",
                        titles: [
                            $ref("titleById[5221]")
                        ]
                    }
                ]
            }
        });

        model.setValue('genreList[0].titles[0].rating', 5)
                .then(function (value) {
                    model.get('genreList[0..1].titles[0]["name","rating"]')
                            .then(function (json) {
                                console.log(JSON.stringify(json, null, 3));
                            })
                });
    </script>
</head>
<body>
</body>
</html>