useCustom invalidated by useCreate
Is is possibly to get useCustom to be automatically invalidted be a useCreate mutation
8 Replies
Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, it is possible to get a
useCustom
query to be invalidated by a useCreate
mutation in refine. You can achieve this by specifying which queries should be invalidated after the mutation is completed using the invalidates
parameter in the mutate
method of useCreate
.
Here is an example of how you can do this:
In this example:
1. The useCustom
hook is used to fetch data from a custom endpoint.
2. The useCreate
hook is used to create a new product.
3. The invalidates
parameter in the mutate
method specifies that the custom query with the key custom-key
should be invalidated after the mutation is completed.
This ensures that the custom query will be refetched after the useCreate
mutation runs successfully.
For more information, you can refer to the useCreate documentation (https://refine.dev/docs/data/hooks/use-create/#invalidates).
If you encounter any issues or need further assistance, feel free to ask!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
optimistic-gold•2w ago
@kapa.ai but what could be the pattern to make this useCustom look like a useList what keys would it need
Let me check the knowledge base for you. One moment! :books:
----------------------
To make a
useCustom
query look like a useList
query and ensure it uses the same key structure, you need to follow the key structure pattern used by useList
. This involves generating a structured key that includes the data provider, resource, action, and parameters.
Here is an example of how you can achieve this:
1. Define the key structure: Use the keys
method from @refinedev/core
to generate the key.
2. Use the generated key in useCustom
: Pass the generated key to the queryOptions
property of useCustom
.
3. Invalidate the query: Use the invalidateQueries
method from useQueryClient
to invalidate the query when needed.
Here is a complete example:
In this example:
1. The keys
method is used to generate a structured key for the useCustom
query.
2. The useCustom
hook is used to fetch data from a custom endpoint, and the generated key is passed to the queryOptions
property.
3. The invalidateQueries
method from useQueryClient
is used to invalidate the query when needed.
This approach ensures that the useCustom
query uses the same key structure as useList
, making it easier to manage and invalidate queries.
For more information, you can refer to the Key Structure documentation (https://refine.dev/docs/guides-concepts/general-concepts/#key-structure) and the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
optimistic-gold•2w ago
@kapa.ai this was my solution which will still invalidate. Leading for refernce for others import { useApiUrl, useCustom } from "@refinedev/core";
interface UseCustomListProps {
resource: string;
payload: any;
onSuccess?: (data: any) => void;
enabled?: boolean;
}
export function useCustomList({ resource, payload, onSuccess, enabled = true }: UseCustomListProps) {
const apiUrl = useApiUrl("default");
const result = useCustom({
url:
${apiUrl}/api/${resource}/query
,
method: "post",
config: { payload: payload },
queryOptions: {
enabled: enabled,
queryKey: ["data", "default", resource, "list", payload],
onSuccess: (data) => {
if (onSuccess) {
onSuccess(data);
}
},
},
});
return result;
}Let me check the knowledge base for you. One moment! :books:
----------------------
Your solution for creating a custom hook that mimics the behavior of
useList
while using useCustom
is well-structured and should work effectively for invalidating queries. Here is your solution formatted as Markdown for reference:
Explanation
1. Parameters:
- resource
: The resource endpoint you want to query.
- payload
: The payload to be sent with the request.
- onSuccess
: Optional callback function to be executed on successful data retrieval.
- enabled
: Boolean to enable or disable the query.
2. API URL:
- The useApiUrl
hook is used to get the base URL of the API endpoint.
3. useCustom Hook:
- The useCustom
hook is used to send a custom query request.
- The url
is constructed using the apiUrl
and the resource
.
- The method
is set to "post".
- The config
includes the payload
.
- The queryOptions
include:
- enabled
: To enable or disable the query.
- queryKey
: A unique key for the query, structured similarly to useList
.
- onSuccess
: A callback function to handle successful data retrieval.
This approach ensures that your custom hook behaves similarly to useList
and can be invalidated appropriately.
For more information, you can refer to the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom/) and the useApiUrl documentation (https://refine.dev/docs/api-reference/core/hooks/data/useApiUrl/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below