Why does urql query cache-hit after RHF's trigger cause an infinite loop?

[RyotoKubo]

Hi, I have a question regarding RHF and urql.

I'm currently writing a hook like the one below, but I encounter infinite re-rendering under specific conditions.

export const useSelect = () => {
  const [brandCd, setBrandCd] = useState<string>('')

  const [{ data, fetching }] = useQuery<{
    get4reasonCars: Get4reasonCarsResponse
  }>({
    query: QUERY_GET_G_AUTO_CARS,
    variables: {
      brandCdList: [brandCd],
    },
    pause: !brandCd,
  })

  const {
    register,
    formState: { isValid },
    handleSubmit,
    setValue,
    trigger
  } = useForm<FormSchemaType>({
    resolver: zodResolver(formSchema),
    mode: 'onChange',
  })

  const handleChangeSelectBox = (e: ChangeEvent<HTMLSelectElement>) => {
    setValue('catId', '')
    trigger('catId')
    setBrandCd(e.target.value)
  }
}

Context

• There are two pages: /a and /b, both pre-generated with SSG.
• useSelect is used on page /b.
• handleChangeSelectBox is triggered by the onChange event of a select box.

Conditions for Infinite Re-rendering

• Navigate from /a to /b for the first time.
• Select the value X from the select box.
• Navigate back to /a using the browser back button.
• Navigate to /b again.
• Select the value X again in the select box.
  At this point, infinite re-rendering occurs.

Observations

• I suspect that RHF's trigger and urql's cache-hit behavior are involved.
• However, I find it puzzling that if I switch the select box value from X → Y → X during the initial navigation, even though it triggers a cache hit, the infinite re-rendering does not occur.

Question

What could be the possible cause of this behavior?

Ref

urql