How to make an API request every time I submit?```
export default function MembershipList() {
const {
data: members,
isLoading,
isFetching,
isRefetching,
} = useList<IMember>({
resource: 'membership/subscribers',
filters: [
{
field: 'value',
operator: 'eq',
value: submittedSearch,
},
],
})
useEffect(() => {
const fetchCustomerGroups = async () => {
try {
const response = await fetch(
${process.env.NEXT_PUBLIC_API_URL}/customergroups/detail
, {
headers: {
'Content-Type': 'application/json',
'ngrok-skip-browser-warning': '69420',
},
})
<form onSubmit={handleSubmit}>
<CardContent sx={{ pt: 0 }}>
<Box mb={2}>
<Typography variant="h6">검색어</Typography>
<Grid container spacing={2}>
<Grid item xs={12} sm={10}>
<TextField
value={searchField}
onChange={(e) => setSearchField(e.target.value)}
label={'검색'}
placeholder={'회원 휴대폰번호, 회원 이름, 회원 아이디'}
margin="normal"
fullWidth
autoFocus
size="small"
variant="outlined"
sx={{ mt: 0, height: 40 }}
/>
</Grid>
</Grid>
</Box>
<Box display="flex" justifyContent="flex-end" width="100%">
<Button type="submit" variant="contained" sx={{ mr: 2 }}>
검색하기
</Button>
<Button type="button" variant="contained" color="secondary" onClick={() => resetForm()}>
초기화
</Button>
</Box>
</CardContent>
</form>
```5 Replies
Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To make an API request every time you submit the form in a Refine application, you should update the state that is used as a filter in your
Every time you submit the form,
useList
hook when the form is submitted. This will trigger the useList
hook to refetch data with the new filter value, as changing the filters
property causes a new request to be made automatically Filtering with useList.
Here's how you can structure your code:
1. Track the search input and submitted value in state:
2. Update the submitted value on form submit:
3. Pass the submitted value as a filter to useList:
4. Form setup:
Key Point:Every time you submit the form,
setSubmittedSearch
updates, which changes the filters
prop in useList
, causing it to refetch data from the API with the new filter value Filtering with useList.
If you want to make a completely custom API request (not tied to a resource), you can use the useCustom
hook and call its refetch
method on submit how to send get request manual.
Let me know if you need an example for custom requests!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1184365192482652173> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
adverse-sapphireOP•2w ago
@kapa.ai
const [searchField, setSearchField] = useState('')
const [submittedSearch, setSubmittedSearch] = useState('')
I already got it with useState. After pressing submita once, it doesn't work again.
Let me check the knowledge base for you again. One moment! :books:
----------------------
If your form only triggers the API request the first time you submit, but not on subsequent submissions (even when the input value changes), the likely cause is that the value in
The
submittedSearch
is the same as before. Since React state updates are shallowly compared, setting the same value again does not trigger a re-render or a new request in hooks like useList
that depend on that state.
How to fix:
- Make sure you are actually changing the value of submittedSearch
on each submit.
- If you want to trigger a request even when the value hasn't changed (e.g., user submits the same search twice), you need to use a different approach, such as including a timestamp or a counter in your state, or using the refetch
method if available.
Relevant information from the knowledge sources:
- The useList
hook will only trigger a new request when the filters
property changes Filtering with useList.
- Dynamically changing the filters
property will trigger a new request, but if the value is the same, no new request is made.
Example workaround:
If you want to always trigger a request on submit, even with the same value, you can use a dummy state to force the change:
Or, if you want to reset the filter, you can use the setFilters
method as described in the knowledge sources:
Github Issue: Search form reset does not invalidate a table
Summary:The
useList
hook only triggers a new request when the filters
property changes. If you submit the same value, no new request is made. To force a new request, you can add a dummy state or use the setFilters
method.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1184365192482652173> Kapa.ai is still learning and improving, please let me know how I did by reacting below.