optimistic-gold•8h ago

how to pass a query string in useCustomMutation

How does one pass a query string in useCustomMutation? Seems like the ?foo=bar gehts stripped from the url? Things i tried so far:

   const {
      mutate,
      mutation: { isPending },
   } = useCustomMutation<CalcResult, HttpError, { legacy: boolean }>({
      mutationOptions: {
         retry: false,
         mutationKey: ["wizard", "calculate_abrechnung", qs.periode, qs.unit, useLegacy],
         onError: (error) => {
            console.error("Calculate Abrechnung error:", error)
            toast.error(error?.message ?? "Fehler bei der Berechnung")
         },
         onSuccess: (data) => {
            console.log("Calculate Abrechnung success:", data)
            setCalcResult(data.data as CalcResult)
            toast.success("Berechnung erfolgreich")
         },
      },
   })

   const runMutate = () => {
      const url = useLegacy ? `${apiUrl}/api/custom/calculate_abrechnung?legacy=true` : `${apiUrl}/api/custom/calculate_abrechnung`
      console.log("🚀 ~ 04_compute.tsx:136 ~ runMutate ~ url:", url)

      mutate({
         url: url,
         method: "post",
         values: { periode_id: qs.periode, einheit_id: qs.unit },
         config: {
            query: {
               legacy: useLegacy ? "true" : "false", // Query-Parameter für den Legacy-Modus
            }
         },
         meta: {

            
            variables: {
               foo: "bar",
            },
            legacy: "true",
         },
      })
   }

   const {
      mutate,
      mutation: { isPending },
   } = useCustomMutation<CalcResult, HttpError, { legacy: boolean }>({
      mutationOptions: {
         retry: false,
         mutationKey: ["wizard", "calculate_abrechnung", qs.periode, qs.unit, useLegacy],
         onError: (error) => {
            console.error("Calculate Abrechnung error:", error)
            toast.error(error?.message ?? "Fehler bei der Berechnung")
         },
         onSuccess: (data) => {
            console.log("Calculate Abrechnung success:", data)
            setCalcResult(data.data as CalcResult)
            toast.success("Berechnung erfolgreich")
         },
      },
   })

   const runMutate = () => {
      const url = useLegacy ? `${apiUrl}/api/custom/calculate_abrechnung?legacy=true` : `${apiUrl}/api/custom/calculate_abrechnung`
      console.log("🚀 ~ 04_compute.tsx:136 ~ runMutate ~ url:", url)

      mutate({
         url: url,
         method: "post",
         values: { periode_id: qs.periode, einheit_id: qs.unit },
         config: {
            query: {
               legacy: useLegacy ? "true" : "false", // Query-Parameter für den Legacy-Modus
            }
         },
         meta: {

            
            variables: {
               foo: "bar",
            },
            legacy: "true",
         },
      })
   }

still no query string in the network tab

5 Replies

kapa.ai•8h ago

Hi @zomh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To pass a query string in useCustomMutation, you should use the config.query property when calling mutate. This property is designed to pass query parameters to your dataProvider's custom method. Your usage in the code sample is correct:

mutate({
   url: url,
   method: "post",
   values: { periode_id: qs.periode, einheit_id: qs.unit },
   config: {
      query: {
         legacy: useLegacy ? "true" : "false",
      }
   },
   // ...
})

mutate({
   url: url,
   method: "post",
   values: { periode_id: qs.periode, einheit_id: qs.unit },
   config: {
      query: {
         legacy: useLegacy ? "true" : "false",
      }
   },
   // ...
})

However, whether these query parameters actually appear in the network request depends on how your dataProvider's custom method is implemented. The refine documentation specifies that config.query is passed to the custom method, but it is up to the dataProvider to append these query parameters to the URL when making the actual HTTP request. Here is the relevant part from the docs:

config.query
It will be passed to the custom method from the dataProvider as a parameter. It can be used to specify the query parameters of the request.

useCustom({
  config: {
    query: {
      title: "Foo bar",
    },
  },
});
useCustom({
  config: {
    query: {
      title: "Foo bar",
    },
  },
});
useCustom documentation

The same applies to useCustomMutation, as it uses the custom method of the dataProvider as its mutation function useCustomMutation documentation. If you do not see the query string in the network tab, it is likely that your dataProvider's custom method is not appending the config.query parameters to the URL. You need to ensure your dataProvider implementation handles this. For example:

custom: async ({ url, method, query, ... }) => {
  // Append query params to the URL
  const queryString = new URLSearchParams(query).toString();
  const fullUrl = queryString ? `${url}?${queryString}` : url;
  // ... make the request using fullUrl
}

custom: async ({ url, method, query, ... }) => {
  // Append query params to the URL
  const queryString = new URLSearchParams(query).toString();
  const fullUrl = queryString ? `${url}?${queryString}` : url;
  // ... make the request using fullUrl
}

In summary:
- Passing query parameters via config.query is correct. - If they do not appear in the request, update your dataProvider's custom method to append them to the URL. The knowledge sources do not provide a built-in guarantee that refine's default dataProviders will always append config.query to the URL, so you may need to check or customize your dataProvider implementation accordingly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8h ago

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

optimistic-goldOP•8h ago

@kapa.ai its working fine for useCustom but not for useCustomMutation

kapa.ai•8h ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're correct—according to the refine documentation, both useCustom and useCustomMutation are designed to pass query parameters via the config.query property, which is then handled by the dataProvider's custom method. The documentation for useCustomMutation explicitly shows that you can pass config (including headers) but does not provide an example for query parameters specifically. However, it states:

config.headers
It will be passed to the custom method from the dataProvider as a parameter. It can be used to specify the headers of the request.

useCustomMutation documentation

The API reference for useCustomMutation also lists config as a parameter, but only mentions headers, not query, in the type description. This suggests that, while useCustom supports config.query, useCustomMutation may not natively support config.query in the same way, or at least it is not documented as such useCustomMutation API Reference. Additionally, there is a related GitHub issue indicating that some parameters (like values/payload) were not being passed through to the GraphQL dataProvider as expected, which suggests there may be inconsistencies or missing features in how parameters are handled for useCustomMutation. Summary:
- Passing query parameters via config.query works for useCustom as documented. - For useCustomMutation, the documentation does not explicitly confirm support for config.query, and there are indications from issues that not all config parameters are handled as expected. - If you need query parameters in useCustomMutation and they are not being sent, you may need to check or extend your dataProvider's custom method to handle config.query, or consider opening an issue with the refine team for clarification or feature support. In short:
The knowledge sources do not explicitly confirm that config.query is supported in useCustomMutation as it is in useCustom. If it works in useCustom but not in useCustomMutation, this may be a limitation or missing feature in the current implementation. If you need this feature, you may need to customize your dataProvider or follow up with the refine team for further support.
useCustomMutation documentation
GitHub Issue: GraphQL dataProvider is missing the params.payload variables merged into the buildVariables ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8h ago

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

how to pass a query string in useCustomMutation

Did you find this page helpful?