{"id":25863,"date":"2023-09-15T16:49:18","date_gmt":"2023-09-15T14:49:18","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=25863"},"modified":"2023-09-15T18:29:02","modified_gmt":"2023-09-15T16:29:02","slug":"optimizing-list-views-structuring-data-efficiently-in-firestore","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/15\/optimizing-list-views-structuring-data-efficiently-in-firestore\/","title":{"rendered":"Optimizing List Views: Structuring Data Efficiently in Firestore"},"content":{"rendered":"\n

While developing our guessing game “More or Less”<\/a>, we encountered a common challenge many developers face: determining the structure of our data model.<\/p>\n\n\n\n

Challenge 1: List vs. Detailed View<\/h2>\n\n\n\n

Many websites show an excerpt of their content in a list view. In our \u201cMore or Less\u201d<\/a> game, for example, we see a series of game cards. Each card shows the game’s title, a picture, a short description, and the creator’s name. If we click on a card we get redirected to a single game where we can play the game with the game data.<\/p>\n\n\n\n

\"list<\/a><\/figure>\n\n\n\n

What could a data structure for this purpose look like?<\/p>\n\n\n\n

The simple way<\/h3>\n\n\n\n

One solution for this could be setting up a game object with all metadata and an object with the additional game data.<\/p>\n\n\n\n

{\n    gameId1: {\n        metaData: {\n           title: ...,\n           \/\/ Other game meta...\n        gameData: {\n           items: ...\n           strings: ...\n           \/\/ Other game data for single game\n         }\n    },\n    gameId2: {\n        metaData: {\n           title: ...,\n           \/\/ Other game meta...\n        gameData: {\n           items: ...\n           strings: ...\n           \/\/ Other game data for single game\n         }\n    },\n    \/\/ Other games\n}<\/code><\/pre>\n\n\n\n
In our overview, we fetch all games and show only the metadata. When we get a single game, we fetch the same and just take the game data.<\/p>\n\n\n\n
Thats a simple and straightforward solution but has some disadvantages:<\/p>\n\n\n\n