react-query-devtools Option to have Trigger Error set data to null for even better development experience

[ColemanDunn]

I would like to say first and foremost the react query devtools are AMAZING. This makes development so much faster and straightforward when it comes to testing and tinkering with the queries and mutations your app is making.

Want to see different data for a one off use case or testing purposes? Easy, open up the dev tools and and edit the data and see everything update real time.

Want to reset the data after that? Easy, press reset.

Want to test loading state and suspense boundaries? Easy, trigger loading.

All of these are amazing, but the dev tools seem to fall short when it comes to one thing specifically: Trigger Error and testing error boundaries.

Somewhat related to this comment here #5956 (comment), if a useSuspenseQuery is populated with data and later errors, it does not tigger an error boundary. Trigger Error only sets the status to error, so this is not a straightforward and viable option to test error boundaries. In order to do so, you have to press Trigger Error and manually edit the data and set it to null.

I would propose that Trigger Error also sets the data to null, but I realize there would be cases with where a query has data populated while having an error state might have custom logic, so perhaps the additional button would be more desirable.

Something along the following:

<button
  class={cx(
    css`
      color: ${t(colors.red[500], colors.red[400])};
    `,
    'tsqd-query-details-actions-btn',
    'tsqd-query-details-action-error',
  )}
  onClick={() => {
    const activeQueryVal = activeQuery()
    if (!activeQueryVal) return

    // Set data to null so suspense can be triggered
    activeQueryVal.setState({
      ...activeQueryVal.state,
      data: null,
    })

    triggerError()
  }}
  disabled={queryStatus() === 'pending'}
>
  <span
    aria-hidden="true"
    class={css`
      background-color: ${t(colors.red[500], colors.red[400])};
    `}
  ></span>
  Set Null and Trigger Error
</button>

Perhaps the copy should be something like Trigger Hard Error or Trigger Error Boundary.

Perhaps the color should be a different shade as well. If this is a path that can go forward I would love to open a PR!