foreign-sapphire•2mo ago

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

kapa.ai•2mo ago

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 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:

const [searchField, setSearchField] = useState("");
const [submittedSearch, setSubmittedSearch] = useState("");

const [searchField, setSearchField] = useState("");
const [submittedSearch, setSubmittedSearch] = useState("");

2. Update the submitted value on form submit:

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  setSubmittedSearch(searchField); // This triggers useList to refetch
};

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  setSubmittedSearch(searchField); // This triggers useList to refetch
};

3. Pass the submitted value as a filter to useList:

const { data: members, isLoading } = useList<IMember>({
  resource: 'membership/subscribers',
  filters: [
    {
      field: 'value',
      operator: 'eq',
      value: submittedSearch,
    },
  ],
});

const { data: members, isLoading } = useList<IMember>({
  resource: 'membership/subscribers',
  filters: [
    {
      field: 'value',
      operator: 'eq',
      value: submittedSearch,
    },
  ],
});

4. Form setup:

<form onSubmit={handleSubmit}>
  <TextField
    value={searchField}
    onChange={(e) => setSearchField(e.target.value)}
    label="검색"
    // ...other props
  />
  <Button type="submit" variant="contained">검색하기</Button>
</form>

<form onSubmit={handleSubmit}>
  <TextField
    value={searchField}
    onChange={(e) => setSearchField(e.target.value)}
    label="검색"
    // ...other props
  />
  <Button type="submit" variant="contained">검색하기</Button>
</form>

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: ----------------------

kapa.ai•2mo ago

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

foreign-sapphireOP•2mo 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.

kapa.ai•2mo ago

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 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:

const [searchField, setSearchField] = useState('');
const [submittedSearch, setSubmittedSearch] = useState('');
const [searchCount, setSearchCount] = useState(0);

const handleSubmit = (e) => {
  e.preventDefault();
  setSubmittedSearch(searchField);
  setSearchCount((c) => c + 1); // force update
};

const { data: members, isLoading } = useList<IMember>({
  resource: 'membership/subscribers',
  filters: [
    {
      field: 'value',
      operator: 'eq',
      value: submittedSearch,
    },
    {
      field: 'searchCount',
      operator: 'eq',
      value: searchCount,
    },
  ],
});

const [searchField, setSearchField] = useState('');
const [submittedSearch, setSubmittedSearch] = useState('');
const [searchCount, setSearchCount] = useState(0);

const handleSubmit = (e) => {
  e.preventDefault();
  setSubmittedSearch(searchField);
  setSearchCount((c) => c + 1); // force update
};

const { data: members, isLoading } = useList<IMember>({
  resource: 'membership/subscribers',
  filters: [
    {
      field: 'value',
      operator: 'eq',
      value: submittedSearch,
    },
    {
      field: 'searchCount',
      operator: 'eq',
      value: searchCount,
    },
  ],
});

Or, if you want to reset the filter, you can use the setFilters method as described in the knowledge sources:

const { setFilters } = useList(...);

const resetFilters = () => {
  setFilters([], "replace");
};

const { setFilters } = useList(...);

const resetFilters = () => {
  setFilters([], "replace");
};

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: ----------------------

kapa.ai•2mo ago

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

How to make an API request every time I submit?```

Did you find this page helpful?