Skip to content

CreateMatchDialog fetches data even when closed #575

Description

@ihs7

Problem

CreateMatchDialog is mounted in the DOM even when isOpen=false (rendered conditionally only on seasonId in matches.tsx:263 and index.tsx:164). The component unconditionally fetches two queries on mount:

  • seasonPlayer.getStanding (create-match-drawer.tsx:89-91)
  • season.getBySlug (create-match-drawer.tsx:87)

This means navigating to the matches page or the season dashboard triggers a standings fetch (which returns all players with stats) even though the user hasn't opened the Create Match dialog yet.

Observed behavior

Navigating to the matches page fires GET /api/trpc/seasonPlayer.getStanding immediately, even though the dialog is closed. On the dashboard this is less noticeable because standings are also used by other components, but on the matches page it's a pure waste.

Fix

Gate the queries in CreateMatchDialog on the isOpen prop:

const { data: season } = useQuery({
  ...trpc.season.getBySlug.queryOptions({ seasonSlug }),
  enabled: isOpen,
});

const { data: seasonPlayers } = useQuery({
  ...trpc.seasonPlayer.getStanding.queryOptions({ seasonSlug }),
  enabled: isOpen,
});

This defers fetching until the user actually opens the dialog.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions