Adjust behavior of react query

[larb26656]

ไม่แน่ใจเป็นเพราะ React query หรือเปล่านะครับ รู้สึกเหมือน default มันตั้งค่าที่ retry 3 ครั้ง แล้วพอ retry fail 3 ครั้งก็จะขึ้น error จากนั้น มันเหมือนไปวน loop อีกรอบ (เรียก api 3 ครั้งใหม่)

[badgooooor]

มีตัวอย่างที่พอจะ reproduce เคสนี้ได้ไหมนะครับ พอดีอยากลอง investigate เพิ่มนิดนึงครับ

[larb26656]

วิธี reproduce นะครับ
1.ไปที่ไฟล์ที่มีการเรียก api เช่น src/components/events/CategoryGrid.tsx จากนั้นทำให้ api เรียกยังไงก็ได้ error อย่างเช่นการ populate field ที่ไม่มีอยู่จริง

const { data, isLoading, error } = useGetEventCategories({
    populate: {
      coverImage: true,
      localizations: {
        populate: ['coverImages'],
      },
    },
  });

2. ​react query จะพยายาม retry 3 ครั้ง จากนั้นจะขึ้น state error
3. ทำการเปลี่ยน tab ด้วยการไป focus tab อื่น แล้วกลับมา focus tab เดิมมันจะทำการเรียก api ทั้งหมด และก็วน loop ไปเรียก 3 ครั้งเหมือนเดิมเหมือนในรูปตัวอย่าง

ไม่แน่ใจว่าอาจจะเป็น behavior ปกติของมันอยู่แล้วหรือเปล่า หรือเป็นเพราะ dev environment

อีกปัญหานึงผมไม่รู้ว่ามันดีหรือเปล่านะแต่แอบรู้สึกว่า UX แปลกๆ เช่นเราเรียก api ที่มันไม่มีอยู่จริงอาจจะไปเปิดโดนบทความที่ไม่มีอยู่ในระบบแล้ว มันจะได้ 404 ผมกำลังคิดว่าถ้าได้พวก 404 หรือ status บางอันมันไม่ควร Retry ไหมนะ UX ที่เห็นในจอตอนนี้คือมันค้าง loading ประมาณ 2-3 วิ (พยายาม retry) จากนั้นค่อยขึ้นว่าไม่พบบทความเลยดูเหมือนเรียก API ช้า

[badgooooor]

เป็น expected behavior ของ react query ครับ มันจะเป็นตาม state machine diagram ประมาณนี้ครับ ในเคสนี้ถ้ามัน error มันจะวิ่งไปที่ stale แล้ว query อีกรอบ

คิดว่า approach ตอนนี้อาจจะต้องมี state ไว้ให้มันหยุด query ครับ

export const useGetEventCategories = (params?: FindParams) => {
  const [disabled, setDisabled] = useState(false);

  const query = useQuery({
    queryKey: [...EVENT_CATEGORIES_QUERY_KEY, params],
    queryFn: () => getEventCategories(params),
    enabled: !disabled,    
  });

  useEffect(() => {
    if (query.isError) {
      setDisabled(true);
    }
  }, [query.isError]);

  return query;
};