Hook was not called automatically when pages load

[CoderVikas94]

Hook was not called automatically when first load pages sometimes. We ahve to refresh it . then data will show How can add dependency when conditional call. please guide @nikkothari22

[nikkothari22]

@CoderVikas94 Can you share a code snippet so that I can help you?

[CoderVikas94]

const { data: clientsData } = useFrappeGetDocList('Client', { fields: ['name'], // filters: [], // limit_start: 0, // limit: 10000, // orderBy: { // field: 'creation', // order: 'desc', // }, });

const { data: equipmentsData, error, isValidating, mutate, } = useFrappeGetDocList( 'Equipment', { fields: [ 'name', 'equipment_sub_type', 'equipment_sub_type_name', 'brand', 'type', 'location', 'pm_checklist_name', 'owner', 'creation', 'modified', 'modified_by', 'docstatus', 'description', 'serial', 'status', 'client', 'building', 'qr_code_image', ], filters: [ ['client', '=', selectedClient !== '' ? selectedClient : clientsData?.[0]?.name], ...(selectedSite ? [['building', '=', selectedSite]] : []), ], limit_start: 0, limit: 50000, orderBy: { field: 'creation', order: 'desc', }, }, { shouldRetryOnError: true, revalidateOnReconnect: true, } );

const { data: sitesData, mutate: siteMutate } = useFrappeGetDocList('Building', { fields: ['name'], filters: [['client', '=', selectedClient !== '' ? selectedClient : clientsData?.[0]?.name]], // limit_start: 0, // limit: 8000, // orderBy: { // field: 'creation', // order: 'desc', // }, });

useEffect(() => { mutate(); siteMutate(); }, [selectedClient, mutate, siteMutate]);

useEffect(() => { mutate(); }, [selectedSite, mutate]);

I want equipmentsData when I have clientdata or cllientdata first index value. So how can I add dependency of clientdata in equipmentdata api call . Please suggest @nikkothari22

[njbhatt18]

Actually issue is we have country state city combo box. Based on countries selected we need to show state and based on state selection we need to show cities. Through sdk how we can do this? @nikkothari22

[CoderVikas94]

Upon page load, our application triggers a function to initialize the dropdown menu. The first item in the dropdown menu array is automatically selected. Subsequently, an API call is made using the selected menu item's filter criteria. through sdk how can I do this ? @nikkothari22

[nikkothari22]

You will have to use SWR keys for this: https://swr.vercel.app/docs/conditional-fetching

Example:

// This gets loaded on page load
const { data: clientsData } = useFrappeGetDocList('Client', { fields: ['name'] })

// This gets loaded when client data is loaded

const { data: equipmentsData } = useFrappeGetDocList('Equipment', { fields: ['name'] }, clientsData ? undefined : null)

Setting the SWR key on any hook as "null" does not trigger the request.

What clientsData ? undefined : null does is that if clientData exists (is not null/undefined), the SWR key is set to "undefined". Else, SWR key is set to null.

Also, if you want to make fields dependent, instead of using useEffect and triggering mutate, just pass custom keys like an array or string etc with the dependent values in them. A key change triggers a new request (and a new cache).