Provide a way to serialize Query (expose stringifyQuery for example)

[GrandSchtroumpf]

[REQUIRED] Describe your environment

• Operating System version: Windows 11
• Browser version: EDGE 107.0.1418.42
• Firebase SDK version: 9.14.0
• Firebase Product: Firestore

[REQUIRED] Describe the problem

When hydrating (angular universal, next.js, ...) / resuming (qwik) the frontend, frameworks serialize the state of the application as a json object in the html. It works well for document & collection reference as we can use the path as a serializable reference, but not for Query. This leads to a flickering on the application if the page display data coming from a query.

Solution

Provide a way to serialize a query so it can be referenced in the backend & frontend the same way. I saw in the code that there is a stringifyQuery that transforms a query into a string. If exposed, it would fix this issue. For example:

const ref = collection('collectionName');
const queryRef = query(ref, where('field', '==', value));
const key = stringifyQuery(queryRef);

[ehsannas]

Thanks for raising this @GrandSchtroumpf. I'll raise this with the team and post back.

[iwikal]

This would also make it much easier to implement a library that bridges between react's suspense feature and firestore.

[GrandSchtroumpf]

Hello, just wanted to provide some fallback if someone is facing the same problem. I recreated a simplified version of the stringified query here : https://github.com/dappsnation/ngfire/blob/master/libs/ngfire/firestore/src/query.ts

I'm not super happy because I have to access some deep link like @firebase/firestore/dist/firestore/src/protos/firestore_proto_api but as it's only for types I think it's ok.

I hope we can have a function provided by the firebase sdk, but it in meantime, it does the job

[iwikal]

That seems to be the best we can do for now, but the problem is that this solution will break as soon as they add a new way in which queries can differ. A new kind of filter, ordering or similar. Depending on how it's used, it might break in a subtle way that is hard to detect for people who use your library. You might want to restrict compatibility to the current minor version, instead of major.

On Sat, 6 May 2023, 17:05 François, @.***> wrote:

Hello, just wanted to provide some fallback if someone is facing the same problem. I recreated a simplified version of the stringified query here :

https://github.com/dappsnation/ngfire/blob/master/libs/ngfire/firestore/src/query.ts

I'm not super happy because I have to access some deep link like @firebase/firestore/dist/firestore/src/protos/firestore_proto_api but as it's only for types I think it's ok.

I hope we can have a function provided by the firebase sdk, but it in meantime, it does the job

— Reply to this email directly, view it on GitHub https://github.com/firebase/firebase-js-sdk/issues/6787#issuecomment-1537160893, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKMETXS4KX3PD3K6O4SPZ3XEZSEPANCNFSM6AAAAAAR6HZIIY . You are receiving this because you commented.Message ID: @.***>

[the0rem]

This would be great if stringifyQuery/canonifyQuery we exposed as providing a deterministic key for caching of queries is extremely difficult right now.