Tips:

使用 ReactQuery 要記得， qureryKey 是 String Array ，用 invalidateQueries 。 qureryKey 是用來讓 ReactQuery 判斷要刷新哪些資料的。

使用場景

當我們使用 useMutation ，希望自動刷新目前新的狀態時，可以在 useMutation onSuccess時，呼叫 queryClient.invalidateQueries，來讓目前快取中的 status 失效，去刷新新的資料。

import { useQuery, useQueryClient } from "@tanstack/react-query";

// 从上下文中获取 QueryClient
const queryClient = useQueryClient();

queryClient.invalidateQueries({ queryKey: ["todos"] });

// 下面的两个查询都会被无效
const todoListQuery = useQuery({
  queryKey: ["todos"],
  queryFn: fetchTodoList,
});
const todoListQuery = useQuery({
  queryKey: ["todos", { page: 1 }],
  queryFn: fetchTodoList,
});

Case Study

import {  
  Button,  
  Col,  
  Descriptions,  
  Row,  
  Space,  
  Tag,  
} from 'antd';  
import styles from './setting-page.module.less';  
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';  
import {  
  getPaymentSetting,  
  setPaymentSetting,  
} from '@service/api';  
import Authenticated from '@components/auth/Authenticated';  
  
  
export const PREFERENCE_STATUS_QUERY_KEY = ['preference', 'status'];  
const PreferencesPage: React.FC = () => {  
  const queryClient = useQueryClient();  
  
  const { data: paymentSetting} = useQuery(PREFERENCE_STATUS_QUERY_KEY,getPaymentSetting);  
  const { mutate: performSetPaymentSetting } = useMutation(setPaymentSetting,{  
  
    onSuccess: () => {  
      queryClient.invalidateQueries(PREFERENCE_STATUS_QUERY_KEY);  
    },  
    onError: (error) => {  
      console.error('error:',error);  
    },  
  });  
  
  
  
  return (  
    <Authenticated>  
      <div className={styles.panelBox}>  
        <div className={styles.panelTitle}>  
          <div className={styles.caption}>Preferences</div>  
        </div>        <div className={styles.panelBody}>  
          <Row gutter={[16, 0]}>  
            <Col span={14}>  
              <Descriptions                column={2}  
                title="Sync Payments from Quickbooks Online to "  
              >  
                <Descriptions.Item label="Payment Sync Status">  
                  {  
                    paymentSetting?.enable_payment_sync ? (  
                    <Tag color="green">On</Tag>  
                  ) : (  
                    <Tag color="red">Off</Tag>  
                  )}  
                </Descriptions.Item>  
              </Descriptions>              <div className={styles.actionBox}>  
                <Space direction="horizontal">  
                  <Button                    block  
                    type="primary"  
                    onClick={() => {  
                      performSetPaymentSetting({ enable_payment_sync: true });  
                    }}  
                  >  
                    Turn Payment Sync On  
                  </Button>  
                  <Button                    block  
                    danger  
                    onClick={() => {  
                      performSetPaymentSetting({ enable_payment_sync: false });  
                    }}  
                  >  
                    Turn Payment Sync Off  
                  </Button>  
                </Space>              </div>            </Col>          </Row>        </div>      </div>    </Authenticated>  );  
};  
  
  
export default PreferencesPage;

API Call Tips

Sometime useMutation onSuccess and onError won't be call, because the wrong data type being return from the back-end.

有些時候 useMutation onSuccess 都不會被執行，可能要檢查，在呼叫api 時，定義的 Content-Type 後端是否有回傳正確。

是因為 await response.json();解不出來 string 導致的。

  
const DEFAULT_HEADERS = {  
  'Content-Type': 'application/json',  
};

export const request = async <ResponseType>(  
  url: string,  
  init?: RequestInit,  
): Promise<ResponseType> => {  
  const { headers, ...rest } = init ?? {};  
  const response = await fetch(url, {  
    headers: combineHeaders(headers),  
    ...rest,  
  });  
  const data = await response.json();  
  if (response.ok) {  
    return data;  
  } else {  
    return Promise.reject(data);  
  }  
};

Metadata

Status :: #🌱

Note Type :: #📩/📰

Source URL :: 主动查询失效 Query Invalidation | TanStack Query 中文文档

Author :: {作者名稱}

Topics :: {筆記跟什麼主題有關,用[Topic],[Topic] 格式子}

To Me :: #mind

Parent Link :: {可以連結到哪個父筆記}

Sibling Link :: {可以連結到哪個相關筆記}

Child Link :: {可以連結到哪個子筆記}