Using a list inside another list


#1

Hi. Can I use a list inside a list? The images explains the question. Such as posts and comments. In React Studio looks fine, I mean is listing. Query looks fine. However looking in a browser it doesn’t show up.

Thank you, Marcos


#2

Hi, You should be able to put list inside List item (just tested it myself with Restaurant demo app). Note that when you are using same data sheet as data source for every Comment list then all items will see the same post comments (in case if you are looking posts list). If you show the comments only in Post details page then it definitely works.

Try debugging with Browser’s developer tools by adding breakpoints to code and checking if data is really loaded.


#3

Hi Antti. Just checking, so that means we can’t show comments because they will be the same and you only know if there are some comments after you click to go to details, so you saved the id into the dataSlot? Not so good :frowning: There must be a clever way to do this…
The problem brings me back to an old problem, I only get the dataSlot value is clicking


#4

We’ll if you have e.g. Latest three comments in collection inside Post document then you can show those inside list item. That’s probably the way the most apps model their data structure. Then when you click “show more comments” the user is forwarded to details screen and comments are loaded from Comments collection.

You can also store all comments inside the post item but it depends a bit if there are thousands of comments then you should store comments in two places. Latest comments into nested collection inside Post document and all comments into main level Comments collection.

Update! Just noticed that plugin ignores nested collections when loading main level collection into Data sheet. We’ll check if nested collections could be loaded like one can load JSON type of columns. This way you can give nested collection (comments) column name as Items Array for the comments list.


#5

Hey Antti. Thank you. For now this news is a relieve. I’ll wait and while move forward with other issues. Thank again


#6

Just a heads up about this matter.

It seems that it is not that simple to load subcollection into Data sheet same way as you can have JSON or array. We’ll check this matter again tomorrow but if there are any Firebase experts available we’re happy to get your input on this.


#7

Hey Antti. Yes indeed. Not possible at this time. I tried in many ways. This definitely would be great! It’s fine, for now, I’m going to use what React Studio can do, combining saving collections, documents, and for the comments the Increment interaction using FireStore. Works just like “medium” when it comes to showing responses. I’m happy :slight_smile: In the future, we’ll treat this matter again showing the last 3 comments which would be more engaging.

I made some research, mainly reading Firebase documentation trying further integration with FB, and to show collections and subcollections, which is possible on Firestore. It turns out that none of my “hacking solutions” worked out.

Hoping you guys come with some future god news. Best, Marcos


#8

Hi,

The more we study how the Firestore subcollections work we’ve come into conclusion that it is not possible to match it into Data sheet format. When Firestore returns Document it does not return it’s subcollections. If one wants to create this kind of “feed” then maybe it should be done by creating an API which returns JSON from on the Firestore database.

Anyway we’re going to release experimental feature which allows users to edit the code template file in the Studio. Code templates are pretty much self explanatory. This way one can add e.g. one import to component without needing to write plugin for simple snippets.

This way you can create new query in each list item and fill array with the results. It is not the easiest way but is workable solution when one needs to show “list inside list” and there is no backend/API which returns JSON.

Here’s an example:

https://neonto.cloud/preview/84eyj5jw


#9

That’s great news! looking forward to see this experimental feature.


#10

You also need to understand that every time you load the list there is 1 query made for each list item which is important to understand because using Firestore charges every document read.

https://firebase.google.com/docs/firestore/pricing


#11

Yeap. Thanks for the reminder :slight_smile: I will .limit () Items to prevent what could be a big problem. Btw, does React Studio support Cursors to manage queries?


#12

I’m not 100% sure but you could try to add e.g. .startAt($slot(‘dataslotname’) into your Query in Data sheet view.