Best practice advise

[feledori]

Hello people,
I am currently building a web app for a company and I have a lot of cases where i fetch a list of objects and have separate api routes to fetch one of the objects. My question is on how to best mutate the cache and keep the code as lean as possible. This is my current approach:

My endpoint currently does not return the created/mutated object so I set populateCache to false.

Here is an example of the list of objects:

export function useVendingKeys(enabled = true) {
  const companyId = useRouter().query.companyId as Company["id"] | undefined;

  const { data, error, mutate } = useSWR<VendingKey[]>(
    enabled && !!companyId ? [companyId, "vendingKeys"] : null,
    ([cID]) => getVendingKeys(cID),
  );

  function createVK(vendingKey: Parameters<typeof createVendingKey>[1]) {
    return mutate(createVendingKey(companyId!, vendingKey) as Promise<any>, {
      optimisticData: (cD) => (cD ? [...cD, vendingKey as VendingKey] : [vendingKey as VendingKey]),
      populateCache: false,
    });
  }

  function updateVK(vendingKey: Parameters<typeof updateVendingKey>[1]) {
    return mutate(updateVendingKey(companyId!, vendingKey) as Promise<any>, {
      optimisticData: (cD) =>
        cD ? cD.map((vk) => (vk.id === vendingKey.id ? (vendingKey as VendingKey) : vk)) : [],
      populateCache: false,
    });
  }

  function deleteVK(vendingKeyId: Parameters<typeof deleteVendingKey>[1]) {
    return mutate(deleteVendingKey(companyId!, vendingKeyId) as Promise<any>, {
      optimisticData: (cD) => (cD ? cD.filter((vk) => vk.id !== vendingKeyId) : []),
      populateCache: false,
    });
  }

  return {
    vendingKeys: data,
    isLoading: !error && !data,
    isError: error,
    createVendingKey: createVK,
    updateVendingKey: updateVK,
    deleteVendingKey: deleteVK,
  };
}

And this is the function which fetches one object:

export function useVendingKey(vendingKeyId: VendingKey["id"], enabled = true) {
  const { mutate: globalMutate } = useSWRConfig();
  const companyId = useRouter().query.companyId as Company["id"] | undefined;

  const { data, error, mutate } = useSWR<VendingKey>(
    enabled && !!companyId && !!vendingKeyId ? [companyId, vendingKeyId, "vendingKey"] : null,
    ([cID, , vKID]) => getVendingKey(cID, vKID),
  );

  function updateVK(vendingKey: Parameters<typeof updateVendingKey>[1]) {
    return mutate(updateVendingKey(companyId!, vendingKey), {
      optimisticData: (cD) => (cD ? { ...cD, ...vendingKey } : vendingKey),
    }).then(() => globalMutate([companyId, "vendingKeys"]));
  }

  function deleteVK(vendingKeyId: Parameters<typeof deleteVendingKey>[1]) {
    return mutate(deleteVendingKey(companyId!, vendingKeyId)).then(() =>
      globalMutate([companyId, "vendingKeys"]),
    );
  }

  return {
    vendingKey: data,
    isLoading: !error && !data,
    isError: error,
    updateVendingKey: updateVK,
    deleteVendingKey: deleteVK,
  };
}