TanStack Query integration

CodeBud.monitorTanStackQueriesData

This method allows you to check TanStack queries data on the TQuery tab in GUI.

CodeBud.monitorTanStackQueriesData takes 1(3) args

queryClient - your TanStack Query client
[optional] updateIntervalMs - Interval of re-checking TanStack queries data (in ms). Defaults to 1000
[optional] batchingTimeMs - batching time of sending new TanStack queries data copy (in ms). Defaults to 500. Smaller value gives you smaller delay, but slower performance. It is not recommended to pass value smaller than 100

// Your TanStack Query client
export const queryClient = new QueryClient();

CodeBud.init("YOUR API KEY HERE", INSTRUCTIONS);

// Here we are subscribing for queries data updates.
// Later you can call unsubscribeCodebudFromTanStackQueriesDataChanges in order to unsubscribe (this is optional)
const unsubscribeCodebudFromTanStackQueriesDataChanges = CodeBud.monitorTanStackQueriesData(queryClient);

That's it. Now you should be able to check TanStack queries data on the TQuery tab in GUI (don't forget to add this tab to navigation bar, it can be done on "Other" tab).

It is not necessary to init CodeBud in the same file, where you are creating your TanStack Query client. You can just import queryClient into the file containing codebud initiation, or you can create a function for codebud initiation and pass queryClient as one of its params (see Redux example), it's similar.

CodeBud.monitorTanStackQueryEvents

This method allows you to monitor TanStack Query cache events.

// Your TanStack Query client
export const queryClient = new QueryClient();

const unsubscribeCodebudFromTanStackQueryEvents = CodeBud.monitorTanStackQueryEvents(queryClient);

That's it. Now you should be able to check TanStack Query cache events on the Network tab in GUI.