Add requiredFilters param to useScaffoldEventHistory hook

[damianmarti]

Description

Add requiredFilters param to useScaffoldEventHistory hook to avoid getting wrong events when setting a filter that is not yet populated with the right value.

If one of the requiredFilters is not set, the hook returns an error.

For example, if I get the filter value from the router query, the first value is undefined, and the hook will return all the events, without this filter applied.

To fix it, I can use a useEffect hook, something like this:

const { roomHash } = router.query as { roomHash: 0x${string} };

const [roomHashFilter, setRoomHashFilter] = useState<string>("aa");

  useEffect(() => {
    if (roomHash) {
      setRoomHashFilter(roomHash);
    }
  }, [roomHash]);

  const {
    data: roomJoinEvents,
    isLoading: isLoadingRoomCreateEvents,
    error: errorReadingRoomCreateEvents,
  } = useScaffoldEventHistory({
    contractName: "BettingRoom",
    eventName: "RoomJoin",
    fromBlock: 1n,
    filters: { roomHash: roomHashFilter },
    watch: true,
  });

But if I use the requieredFilters params I only need the useScaffoldEventHistory hook:

const { roomHash } = router.query as { roomHash: 0x${string} };

  const {
    data: roomJoinEvents,
    isLoading: isLoadingRoomCreateEvents,
    error: errorReadingRoomCreateEvents,
  } = useScaffoldEventHistory({
    contractName: "BettingRoom",
    eventName: "RoomJoin",
    fromBlock: 1n,
    filters: { roomHash: roomHash },
    watch: true,
    requiredFilters: ["roomHash"],
  });

Or maybe there is another better option that I'm missing :-)

Additional Information

• I have read the contributing docs (if this is your first contribution)
• This is not a duplicate of any existing pull request

Your ENS/address: damianmarti.eth

[rin-st]

what about adding enabled flag like for example here (default true)? So if that flag is false then return undefined or empty array.

why it can be undefined btw?

so your hook will look like

const { roomHash } = router.query as { roomHash: 0x${string} };

  const {
    data: roomJoinEvents,
    isLoading: isLoadingRoomCreateEvents,
    error: errorReadingRoomCreateEvents,
  } = useScaffoldEventHistory({
    contractName: "BettingRoom",
    eventName: "RoomJoin",
    fromBlock: 1n,
    filters: { roomHash: roomHash },
    watch: true,
    enabled: Boolean(roomHash)
  });

[damianmarti]

router.query

Thanks for the feedback!

I think this is a good option too! Not sure what is better ;-)

roomHash is undefined before it's hydrated with the router query data.

[sverps]

I like the enabled flag, because it follows the way that wagmi hooks do it, so should be somewhat familiar to devs. It also allows for more flexibility in the condition to trigger the hook.

[damianmarti]

@rin-st @sverps Changed to use enabled flag!

[carletex]

Thanks @damianmarti for making the hooks better.

And thanks all for the review!!!