fascinating-indigo•2d ago
Failing Background Refetches on Edit Pages for Nested Resources
I'm working with nested resources and I'm running into an issue on my edit pages where the initial data load works correctly, but all subsequent background refetches (like on window focus or when using the <RefreshButton>) fail with a 404 error.
The Setup:
I have three levels of nested resources:
1.
competitions
2. sessions (nested under competitions)
3. events (nested under sessions)
My API endpoints for these nested resources look like this:
- /api/competitions/{competitionId}/sessions/{sessionId}
- /api/competitions/{competitionId}/sessions/{sessionId}/events/{eventId}
The Problem:
When I navigate to an edit page for a nested resource, like /competitions/1/sessions/edit/1, the initial GET request to fetch the data works perfectly: GET https://lsc-api.mydomain.ca/api/competitions/1/sessions/1 (200 OK)
However, any subsequent background refetches triggered by Refine (e.g., on window focus or by clicking the refresh button) fail because they call the wrong URL: GET https://api.mydomain.ca/api/sessions/1 (404 Not Found)
It seems the meta object with the parent resource information is not being passed to these background refetches.
What I've Tried:
I have correctly configured the useForm hook in my edit pages to pass the meta object to both the refineCoreProps (for the update mutation) and the queryOptions (for the initial getOne query). This is why the initial load and the form submission work correctly.
Thanks.11 Replies
Hi @Sam. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your issue—where background refetches on edit pages for nested resources fail with a 404 because the refetch uses an incorrect, non-nested URL—is a known challenge when working with nested resources in Refine. The root cause is that, while you may pass the correct
Always provide the full nested resource path (including all parent IDs) to your hooks and components. For example: If you use custom routes, make sure your resource definitions and navigation helpers (like
Extract all necessary parameters (e.g.,
The knowledge sources confirm that while you can pass
If the default
meta or resource path for the initial fetch, subsequent refetches (triggered by window focus or <RefreshButton>) often default to using only the resource name and ID from the route, losing the parent context or meta information.
Key Points from the Knowledge Sources
- Resource Path Handling: Refine's data hooks (like useForm, useShow, etc.) use the resource parameter to determine the API endpoint. If you have nested resources, you must ensure the full path (including parent IDs) is provided to the hook, not just the resource name. This is typically done via the resource prop and, if needed, by extracting parameters from the URL using hooks like useParsed or useParams [useForm resource docs].
- Meta Propagation: The meta object can be used to pass additional information (like parent IDs) to your data provider. However, unless you ensure that the same meta is available on every refetch (including those triggered by background events or UI actions), Refine may fall back to a default, non-nested resource path [Official answer on nested resources].
- RefreshButton and Refetch: The <RefreshButton> and background refetches use the resource and ID from the current route. If your route or resource definition does not include the parent context, the refetch will target the wrong endpoint [Github Issue 1729].
What You Can Do
1. Ensure Resource Path Consistency:Always provide the full nested resource path (including all parent IDs) to your hooks and components. For example: If you use custom routes, make sure your resource definitions and navigation helpers (like
useGo, useNavigation) are aware of all parameters [Github Issue 1724].
2. Use URL Parameters Explicitly:Extract all necessary parameters (e.g.,
competitionId, sessionId) from the URL using useParsed or useParams, and pass them to your hooks. This ensures that even on refetch, the correct context is available.
3. Meta Propagation Limitation:The knowledge sources confirm that while you can pass
meta to the initial query, background refetches may not automatically propagate this meta unless you wire it up everywhere. This is a limitation, and there is no built-in mechanism in Refine (as of the latest sources) to automatically persist meta across all refetches [Github Issue 2095].
4. Custom Refresh Logic (if needed):If the default
<RefreshButton> or background refetches do not work as expected, you may need to implement a custom refresh button that explicitly passes the correct resource path and meta information to the refetch function.
Summary
- The problem is due to the loss of parent context (meta or full resource path) on background refetches.
- There is no automatic way in Refine to persist meta or nested resource context across all refetches.
- You must ensure that all hooks and UI components (including refresh actions) are provided with the full nested resource path and necessary parameters.
- If needed, implement custom refresh logic to guarantee the correct endpoint is always used.
If you need a concrete code example or further clarification, please provide your current hook/component setup, and I can help you adapt it to ensure consistent nested resource handling.
The knowledge sources do not mention a built-in fix for this issue, so the above recommendations are based on documented patterns and known limitations in Refine's handling of nested resources and refetches [Github Issue 1729; Official answer on nested resources].---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@757229719111335969> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
fascinating-indigoOP•2d ago
Its still not working even when i add the context to my resource;
now ;
Data Provider
On my edit page ; http://localhost:5173/competitions/1/sessions/edit/1
There's still 5 GET attempt with the request URL missing the competition context, e.g. ;
Request URL
https://api.mydomain.ca/api/sessions/1
GET 404 Not Found
my nested resource is setup like this ;
@kapa.ai stop working?
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry, but your question "stop working?" is unclear and does not provide enough context for me to give a specific answer related to Refine. If you are experiencing an issue where something in Refine "stops working," please provide more details about the problem, such as error messages, the feature or hook involved, or steps to reproduce the issue.
If you clarify your question, I'll do my best to help based on the available knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@757229719111335969> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
fascinating-indigoOP•2d ago
@kapa.ai
Its still not working even when i add the context to my resource;
now ;
export const SessionEdit = () => {
const { competitionId, sessionId } = useParams();
const formMethods = useForm<Session>({
refineCoreProps: {
resource:
competitions/${competitionId}/sessions,
id: sessionId,
},
});
const {
saveButtonProps,
refineCore: { formLoading },
} = formMethods;
return (
<Edit
isLoading={formLoading}
saveButtonProps={saveButtonProps}
resource={competitions/${competitionId}/sessions}
>
...
</Edit>
);
};
Data Provider
export const dataProvider = (
apiUrl: string,
httpClient: AxiosInstance = axiosInstance,
): DataProvider => ({
getOne: async ({ resource, id, meta }) => {
const url = ${apiUrl}/${resource}/${id};
const { headers, method } = meta ?? {};
const requestMethod = (method as MethodTypes) ?? "get";
const { data } = await httpClient[requestMethod](url, { headers });
return {
data,
};
},
On my edit page ; http://localhost:5173/competitions/1/sessions/edit/1
There's still 5 GET attempt with the request URL missing the competition context, e.g. ;
Request URL
https://api.mydomain.ca/api/sessions/1
GET 404 Not Found
my nested resource is setup like this ;
{
name: "sessions",
list: "/competitions/:competitionId/sessions",
create: "/competitions/:competitionId/sessions/create",
edit: "/competitions/:competitionId/sessions/edit/:id",
show: "/competitions/:competitionId/sessions/show/:id",
meta: {
parent: "competitions",
canDelete: true,
label: t("resources.sessions.label"),
title: t("resources.sessions.title"),
description: t("resources.sessions.description"),
},
},Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on your code and the knowledge sources, the issue is that, despite passing the correct
You must always provide the full nested resource path (including all parent IDs) to your data hooks. If you only provide
If you use route parameters (like
The
In your
The
Make sure to pass the correct
resource to your useForm hook and <Edit /> component, background refetches (and sometimes even initial fetches) may still use only the resource name (sessions) and the id from the route, resulting in requests like /api/sessions/1 instead of /api/competitions/1/sessions/1.
Why This Happens
Refine's hooks and components (like useForm, <Edit />, and <RefreshButton />) rely on the resource and id to construct API calls. However, when you define your resource as just "sessions", Refine does not automatically know to include the parent context (competitionId) for all requests, especially for background refetches or when using the default resource name from the route. The meta field in your resource definition is used for UI and navigation, not for API path construction in data hooks or the data provider [Github Issue 1724; Official answer on nested resources].
What the Knowledge Sources Say
- Resource Path Must Be Explicit:You must always provide the full nested resource path (including all parent IDs) to your data hooks. If you only provide
"sessions", Refine will call /api/sessions/1. If you provide "competitions/1/sessions", it will call /api/competitions/1/sessions/1 [useForm resource docs].
- Route Parameters:If you use route parameters (like
:competitionId), you need to extract them (with useParams or useParsed) and interpolate them into the resource path you pass to the hook [Github Issue 1724].
- Resource Definitions Are for UI, Not API:The
resource definitions in your <Refine resources={...} /> setup are for UI routing and navigation, not for API path construction in data hooks. The API path must be constructed in your hook usage [Github Issue 5594].
What You Should Do
- Always Pass the Full Resource Path:In your
useForm and <Edit />, always use the full path:
This ensures that all requests, including background refetches, use the correct API path.
- Do Not Rely on Resource Definitions for API Paths:The
meta and parent fields in your resource definitions are not used by the data hooks for API path construction. They are for UI and navigation only [Github Issue 1724].
- If You Need to Use <RefreshButton>:Make sure to pass the correct
resource and recordItemId props:
This will ensure the refresh uses the correct nested path [Github Issue 1729].
Summary
- The problem is that background refetches default to the resource name (sessions) without the parent context.
- Always pass the full nested resource path (including all parent IDs) to your hooks and components.
- Resource definitions in <Refine /> are for UI, not for API path construction.
- The knowledge sources do not mention a built-in way to automatically propagate parent context for nested resources in all cases; you must handle it explicitly in your code.
If you follow this pattern, all requests—including background refetches—should hit the correct nested endpoint.
If you are already doing this and still see incorrect requests, please double-check that every place you use a data hook or button (including <RefreshButton>) is receiving the full resource path, not just the resource name.
If you need more advanced dynamic path handling, you may need to customize your data provider to interpret meta or other context, but this is not handled automatically by Refine according to the knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@757229719111335969> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
fascinating-indigoOP•2d ago
@kapa.ai its all not working. Dont know what to do next...
Let me check the knowledge base for you again. One moment! :books:
----------------------
I'm sorry to hear that it's still not working. Based on the knowledge sources provided, here are the key points and limitations:
1. Explicit Resource Path Required:
Refine requires you to pass the full nested resource path (including all parent IDs) to your data hooks and components. This means everywhere you use
The
The knowledge sources indicate that background refetches (like those triggered by
If you need more advanced dynamic path handling, you may need to customize your data provider to interpret
Refine requires you to pass the full nested resource path (including all parent IDs) to your data hooks and components. This means everywhere you use
useForm, <Edit />, or <RefreshButton>, you must provide the full path, such as competitions/1/sessions, not just sessions [useForm resource docs].
2. Resource Definitions Are for UI, Not API:The
meta and parent fields in your resource definitions are used for UI and navigation, not for constructing API paths in data hooks. The API path must be constructed in your hook usage, not inferred from the resource definition [Github Issue 1724].
3. Background Refetches Limitation:The knowledge sources indicate that background refetches (like those triggered by
<RefreshButton> or window focus) may not automatically propagate the parent context or meta information. This is a known limitation, and there is no built-in way in Refine (according to the sources) to ensure that the parent context is always included in these refetches [Github Issue 1729].
4. Custom Data Provider:If you need more advanced dynamic path handling, you may need to customize your data provider to interpret
meta or other context, but this is not handled automatically by Refine according to the knowledge sources.
---
If you have already followed all the documented steps and are still experiencing issues, the knowledge sources do not provide a solution beyond what has been described above. There is no mention of a built-in fix for this specific problem with background refetches and nested resources.
If you need further help, you may want to open a new issue on the Refine GitHub repository with a minimal reproducible example, as the knowledge sources do not contain enough information to resolve your issue completely.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@757229719111335969> Kapa.ai is still learning and improving, please let me know how I did by reacting below.