State syncing with local state - is there a better way?

So I was reading this article from TkDodo where he basically says that state syncing is to be avoided if at all possible https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose . So I'm wondering the best way to handle this situation.
I have a useQuery that gets a list of quotes that each have a quote ID. The quotes are displayed in a table with a checkbox next to each quote. Now I have a local state for

checkedQuoteIDs

checkedQuoteIDs

to keep track of which ones are checked. I want them all to be checked by default to begin with.

Here is my useQuery and state:

const [checkedQuoteIDs, setCheckedQuoteIDs] = useState<string[]>([]);

    const queryClient = useQueryClient();

    const {
        data: quoteList,
        isLoading: gettingQuotes,
        status: quotesStatus
    } = useQuery<{
        tableData: { mainHeader: string; chemicals: any[] }[],
        editableQuoteData: {
            quoteNo: string,
            altPrice: string,
            load: string,
            category: string,
            chemical: string,
        }[]
        categories: string[],
        chemicals: any[]
    } | undefined>({
        queryFn: getQuoteTableDataByPriceListID,
        queryKey: ['quotesByPriceListID', priceList.id],
        enabled: !!priceList?.id,
    });

const [checkedQuoteIDs, setCheckedQuoteIDs] = useState<string[]>([]);

    const queryClient = useQueryClient();

    const {
        data: quoteList,
        isLoading: gettingQuotes,
        status: quotesStatus
    } = useQuery<{
        tableData: { mainHeader: string; chemicals: any[] }[],
        editableQuoteData: {
            quoteNo: string,
            altPrice: string,
            load: string,
            category: string,
            chemical: string,
        }[]
        categories: string[],
        chemicals: any[]
    } | undefined>({
        queryFn: getQuoteTableDataByPriceListID,
        queryKey: ['quotesByPriceListID', priceList.id],
        enabled: !!priceList?.id,
    });

Is a better option to add a

select

select

into that useQuery and add a

checkedQuotes

checkedQuotes

array to the

quoteList

quoteList

object? Or should I be using my local state variable to keep track of checked quotes? How do I initially set them all as checked then?

Breaking React Query's API on purpose

Why good API design matters, even if it means breaking existing APIs in the face of resistance.

TanStack•2y ago•

3 replies

moderate-tomato

State syncing with local state - is there a better way?

checkedQuoteIDs

checkedQuoteIDs

to keep track of which ones are checked. I want them all to be checked by default to begin with.

Here is my useQuery and state:

const [checkedQuoteIDs, setCheckedQuoteIDs] = useState<string[]>([]);

    const queryClient = useQueryClient();

    const {
        data: quoteList,
        isLoading: gettingQuotes,
        status: quotesStatus
    } = useQuery<{
        tableData: { mainHeader: string; chemicals: any[] }[],
        editableQuoteData: {
            quoteNo: string,
            altPrice: string,
            load: string,
            category: string,
            chemical: string,
        }[]
        categories: string[],
        chemicals: any[]
    } | undefined>({
        queryFn: getQuoteTableDataByPriceListID,
        queryKey: ['quotesByPriceListID', priceList.id],
        enabled: !!priceList?.id,
    });

const [checkedQuoteIDs, setCheckedQuoteIDs] = useState<string[]>([]);

    const queryClient = useQueryClient();

    const {
        data: quoteList,
        isLoading: gettingQuotes,
        status: quotesStatus
    } = useQuery<{
        tableData: { mainHeader: string; chemicals: any[] }[],
        editableQuoteData: {
            quoteNo: string,
            altPrice: string,
            load: string,
            category: string,
            chemical: string,
        }[]
        categories: string[],
        chemicals: any[]
    } | undefined>({
        queryFn: getQuoteTableDataByPriceListID,
        queryKey: ['quotesByPriceListID', priceList.id],
        enabled: !!priceList?.id,
    });

Is a better option to add a

select

select

into that useQuery and add a

checkedQuotes

checkedQuotes

array to the

quoteList

quoteList

object? Or should I be using my local state variable to keep track of checked quotes? How do I initially set them all as checked then?

Breaking React Query's API on purpose

Why good API design matters, even if it means breaking existing APIs in the face of resistance.

State syncing with local state - is there a better way?

Similar Threads

State syncing with local state - is there a better way?

Similar Threads

Similar Threads

Similar Threads