How to query subset of data

[matthieunelmes]

Apologies if this is outside the scope of this, but I'm attempting to port an application across from AngularJS to React and hoping there may be a solution here.

So my RTDB structure is set up as follows:

-customers
    -customer1
        -orders
            -key1:true
            -key2:true
            -key3:true
            
-orders
    -key1
    -key2
    -key3

Previously with AngularFire (for AngularJs) I could use the $extend functionality allowing me to return an array of Firebase objects with:

  var customerOrders = firebase.database().ref('customers/' + customerId + '/orders/');
  var orders = firebase.database().ref('orders');
  var OrdersList = $firebaseArray.$extend({
    $$added: function (snap) {
      return new Promise(function (resolve, reject) {
        $firebaseObject(orders.child(snap.key)).$loaded().then(function (orderData) {
          resolve(orderData);
        }).catch(reject);
      });
    }
  });
  return new OrdersList(customerOrders);

[Ehesp]

Hey @matthieunelmes

Just to confirm, are you basically looking to do:

-customers
    -customer1
        -orders
            -key1:true
            -key2:true
            -key3:true
            

Get the order ids for customer1, in this case -key1, -key2 and -key3. With your orders:

-orders
    -key1: order data...
    -key2
    -key3
    -keyX

Within your orders object, grab only the orders by keys which were noted above?

If so that should be doable - however in your example isn't that loading each order one by one?

Cheers

[matthieunelmes]

Yes that's correct. So as you say, return the orders for a specific customer.

I can't comment on how performant the AngularFire solution was, but it was great as it returned an array of Firebase snaps so you had the listeners attached.

[Ehesp]

This is fully untested and off the top of my head, but something like this should work. It makes use of useQueries.

Also still working through docs, but they're here for database: https://react-query-firebase.invertase.dev/database

Plan on reworking them but they should help understanding the below:

const customerId = 'customer1';

// Query the customer straight away:
const customerQuery = useDatabaseValue(["customer", customerId, "orders"], ref(db, `customers/${customerId}/orders`));

// Get the ids for the customer (or none if its loading)
const orderKeys = Object.keys(customerQuery.data ?? {});

// Query all order records, only once the customer data is available.
const ordersQueries = useQueries(orderKeys.map((orderId) => {
  return useDatabaseValue(
    ["customer", customerId, "orders", orderId],
    ref(db, `orders/${orderId}`),
    {},
    {
      enabled: customerQuery.isSuccess,
    }
  );
});

if (customerQuery.isLoading) {
  return 'Loading';
}

return (
  <ul>
    {ordersQueries.map((orderQuery) => {
      if (orderQuery.isLoading) {
        return <li>Loading order...</li>;
      }

      return <li>{orderQuery.data.id}</li>
    })}
  </ul>
);

You'd get a hard loading state while the customer is loading, and then each order row will load once it's ready. Since we are using unique query keys too it'd work well for updating too.

Also if you want that in realtime, just pass the subscribe: true flag in and it should work the same.

[matthieunelmes]

Ok great! I'll do some tests and report back

[Ehesp]

Ah so there's a better way to do this thinking about it, and useQueries isn't great with TypeScript if you use that (see here).

We can just extract things out into their own components instead :)

function Orders() {
  const customerId = 'customer1';

  // Query the customer straight away:
  const customerQuery = useDatabaseValue(
    ["customer", customerId, "orders"],
    ref(db, `customers/${customerId}/orders`)
  );
  
  if (customerQuery.isLoading) {
    return 'Loading';
  }

  const orderIds = Object.keys(customerQuery.data);

  return (
    <ul>
      {orderIds.map((id) => (
        <Order key={id} customerId={customerId} orderId={id} />
      )}
    </ul>
  );
}

function Order({ customerId, orderId }) {
  const orderQuery = useDatabaseValue(
    ["customer", customerId, "orders", orderId],
    ref(db, `orders/${orderId}`
  );

  if (orderQuery.loading) {
    return <li>Loading order...</li>
  }

  return <li>{orderQuery.data.id}</li>
}

[matthieunelmes]

Ahhh, I don't think I'll get around to this tonight. Already hit an issue because react-query-firebase tried to resolve firebase/database but I'm using react-native-firebase.

Sorry my bad, should've mentioned I'm using react native

[Ehesp]

Ah no problem!