Does useShow and similar data fetchers have a way to adjust the data after fetch

4 Replies

Hi @Todilo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, there doesn't appear to be a direct way to adjust the data after fetching using useShow or similar data fetchers in refine. However, there are a couple of approaches you can consider to achieve this: 1. Using the transformValues option: While this is not specifically for useShow, the useStepsForm hook (which is part of the Mantine UI integration) provides a transformValues option that allows you to modify the form data before submission. This concept could potentially be applied to other data fetching hooks as well, but it's not explicitly mentioned for useShow in the provided documentation useStepsForm FAQ (https://refine.dev/docs/ui-integrations/mantine/hooks/use-steps-form/#faq). 2. Handling the data transformation in your component: Since useShow returns the fetched data, you can transform it within your component after it's been fetched. Here's an example of how you might do this:

   import { useShow } from "@refinedev/core";

   const MyComponent = () => {
     const { queryResult } = useShow();
     const { data, isLoading } = queryResult;

     // Transform the data after fetching
     const transformedData = React.useMemo(() => {
       if (data) {
         // Perform your data transformation here
         return {
           ...data,
           // Add your transformations
         };
       }
       return data;
     }, [data]);

     if (isLoading) {
       return <div>Loading...</div>;
     }

     return (
       <div>
         {/* Use transformedData in your component */}
       </div>
     );
   };

   import { useShow } from "@refinedev/core";

   const MyComponent = () => {
     const { queryResult } = useShow();
     const { data, isLoading } = queryResult;

     // Transform the data after fetching
     const transformedData = React.useMemo(() => {
       if (data) {
         // Perform your data transformation here
         return {
           ...data,
           // Add your transformations
         };
       }
       return data;
     }, [data]);

     if (isLoading) {
       return <div>Loading...</div>;
     }

     return (
       <div>
         {/* Use transformedData in your component */}
       </div>
     );
   };

It's worth noting that the knowledge sources don't provide explicit information about built-in data transformation capabilities for useShow or similar data fetchers in refine. If you need more specific functionality, you might want to consult the official refine documentation or reach out to their support channels for more detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@207945811592478720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

optimistic-gold•2w ago

Hey @Todilo, you can use queryOptions.select to transform data before being set to data 🚀

passive-yellowOP•2w ago

Thanks I will try that. Sounds much better!