How to properly filter queries?

[gugahoi]

Disclaimer: I have 0 familiarity with Observables.

So, I have been trying to use ReactFire in a new project and the first functionality I require is to have a filtered query. Basically I have a list of "Prizes" and I'd like to be able to filter the prizes based on "time". This has been traditionally easy with the firebase sdk, however I can't seem to replicate this functionality and I am unsure if this is misguided use of the library or a shortcoming of it.

Following is a concrete example:

function Prizes() {
  const { year, weekNumber } = usePrizes() as any
  const [state, setState] = useState<State<Prize>>({
    status: 'loading',
    data: [],
    error: undefined,
  })
  const { status, data, error } = state
  const ref = useFirestore().collection('prizes').limit(3)
  useEffect(() => {
    console.log('getting new data', { year, weekNumber })
    ref
      .where('year', '==', year)
      .where('weekNumber', '==', weekNumber)
      .get()
      .then((snap) => {
        console.log('Retrieved', snap, snap.size)
        setState({
          data: snap.docs.map((doc) => doc.data() as Prize),
          status: 'success',
          error: undefined,
        })
      })
      .catch((e) => {
        console.error('Error', e)
        setState({ status: 'error', data: [], error: e })
      })
  }, [weekNumber, year])
  if (status === 'loading') return <p>Loading</p>
  if (status === 'error') return <p>{error?.message || ''}</p>
  if (error !== undefined)
    return (
      <p>
        Something went wrong:{error.name} -- {error.message}
      </p>
    )

  return <pre>{JSON.stringify({ status, data, error })}</pre>
}

With the above component I get correct results on first load however when I change the filters for this query, I simply get empty results - even when returning to the initial value. The filters are year and weekNumber and they are updated elsewhere in the code.

I've also tried to leverage useFirestoreCollectionData with the same results and it seems I do not know how to properly update and fire a new query based on input parameters. I've also been unable to find examples or similar issues with the closest one being (#178).

[epodol]

Hi,

It seems like most of the code your writing is already done in ReactFire's useFirestoreCollectionData. I highly recommend using that unless you need some advanced customization or filtering of the data received (such as creating your own OR query). Unless you are using other features of reactfire besides useFirestore, you might as well just use the vanilla JS SDK, because that hook just returns Firestore (with maybe some suspense depending on your configuration).

The useFirestoreCollectionData acts as a react hook, which you would typically call inside a react component. As an argument for the useFirestoreCollectionData, you should supply the Firestore query. Whenever the argument for the hook changes, the observable refreshes and returns the latest data, triggering a rerender. Here is a simple example that should match your use case:

// imports, as necessary

const PrizeList = () => {
  const { year, weekNumber } = usePrizes() as any;
  const firestore = useFirestore();
  const prizeListRef = firestore
    .collection('prizes')
    .limit(3)
    .where('year', '==', year)
    .where('weekNumber', '==', weekNumber);

const  { status, data, error } = useFirestoreCollectionData(prizeListRef);

  if (status === 'loading') return <p>Loading</p>
  if (status === 'error') return <p>{error?.message || ''}</p>
  if (error !== undefined)
    return (
      <p>
        Something went wrong:{error.name} -- {error.message}
      </p>
    )

  return <pre>{JSON.stringify({ status, data, error })}</pre>
    

To use ReactFire, very little knowledge is required about how the observable works. useFirestoreCollectionData is simply a react hook where you can pass in the Firestore query as an argument.There is also no need to put it in a useEffect callback; the hook will begin returning new results once the arguments change.

I hope that answers your question!

[gugahoi]

Thanks for confirming my suspicion. I did try exactly what you described and had problems which is why I went down the path of "recreating" the useFirestoreCollectionData functionality. It turns out it was working all along and I simply didn't parse my filters correctly 🤦

[epodol]

I'm glad you fixed it!

[jhuleatt]

Thanks for the great answer @epodol!