Is it ok to use setQueryData to edit query state instead of useState?

Hello, I have a react component where I am editing stripe product in my database.

Instead of adding

useEffect

useEffect

and

useState

useState

in my component to handle the state, I thought why not just use setQuery method instead.

Is it okay to handle all edits with

setQueryData

setQueryData

method, meaning creating different handler functions such as

handleAddNewProductFeature

handleAddNewProductFeature

handleDeleteProductFeature

handleDeleteProductFeature

editFeatureDescription

editFeatureDescription

and so on.

  const handleAddNewFeature = () => {
    if (!productQueryData) return;
    const newFeatures = [
      ...productQueryData.product_id.features!, // I am expecting products to be created with at least empty array
      {
        feature_description: '',
        order_number: productQueryData.product_id.features
          ? productQueryData.product_id.features.length + 1
          : 1
      }
    ];
    queryClient.setQueryData(['product', id], {
      ...productQueryData,
      product_id: {
        ...productQueryData.product_id,
        features: newFeatures
      }
    });
  };

  const handleAddNewFeature = () => {
    if (!productQueryData) return;
    const newFeatures = [
      ...productQueryData.product_id.features!, // I am expecting products to be created with at least empty array
      {
        feature_description: '',
        order_number: productQueryData.product_id.features
          ? productQueryData.product_id.features.length + 1
          : 1
      }
    ];
    queryClient.setQueryData(['product', id], {
      ...productQueryData,
      product_id: {
        ...productQueryData.product_id,
        features: newFeatures
      }
    });
  };

I don't want to mutate any state in my database, unless I know that user is happy with changess and press save button, only then I persist those changes to my database.

Is it common to have this approach?

TanStack•4y ago•

6 replies

awake-maroon

Is it ok to use setQueryData to edit query state instead of useState?

Hello, I have a react component where I am editing stripe product in my database.

Instead of adding

useEffect

useEffect

and

useState

useState

in my component to handle the state, I thought why not just use setQuery method instead.

Is it okay to handle all edits with

setQueryData

setQueryData

method, meaning creating different handler functions such as

handleAddNewProductFeature

handleAddNewProductFeature

handleDeleteProductFeature

handleDeleteProductFeature

editFeatureDescription

editFeatureDescription

and so on.

  const handleAddNewFeature = () => {
    if (!productQueryData) return;
    const newFeatures = [
      ...productQueryData.product_id.features!, // I am expecting products to be created with at least empty array
      {
        feature_description: '',
        order_number: productQueryData.product_id.features
          ? productQueryData.product_id.features.length + 1
          : 1
      }
    ];
    queryClient.setQueryData(['product', id], {
      ...productQueryData,
      product_id: {
        ...productQueryData.product_id,
        features: newFeatures
      }
    });
  };

  const handleAddNewFeature = () => {
    if (!productQueryData) return;
    const newFeatures = [
      ...productQueryData.product_id.features!, // I am expecting products to be created with at least empty array
      {
        feature_description: '',
        order_number: productQueryData.product_id.features
          ? productQueryData.product_id.features.length + 1
          : 1
      }
    ];
    queryClient.setQueryData(['product', id], {
      ...productQueryData,
      product_id: {
        ...productQueryData.product_id,
        features: newFeatures
      }
    });
  };

Is it ok to use setQueryData to edit query state instead of useState?

Similar Threads

Is it ok to use setQueryData to edit query state instead of useState?

Similar Threads

Similar Threads

Similar Threads