I am using graphQl to query database records. I created a filter component with materialUi TextField with refetch to run the query after the filter values have been updated.
Sometimes after clearing the values the query is not called once again (e.g. on the date field).
This is my code:
const newDate = new Date();
const [date, setDate] = useState(newDate);
const { data, loading, error, refetch } = useQuery(GET_ALL, {
variables: { first: 100, task: task, status: status, week: week, date: date, responsible_entity: responsible, no_incident: no_incident, site: site }, onCompleted: (
) => { setItems(data.getAll)
}
});
<TextField
id="dateFilter"
type="date"
defaultValue={dateToString(myDate)}
variant="outlined"
className={classes.textField}
onChange={(e, v) => { setDate(e.target.value); refetch() }}
/>
<Controller
control={control}
name="responsible"
render={({ field: { onChange, value }, fieldState: { error } }) => (
<Autocomplete
id="responsible"
options={responsiblesList}
defaultValue={{ 'DISTINCT': responsible || '' }}
getOptionLabel={(option) => option.DISTINCT}
style={{ width: 300 }}
className={classes.textField}
onInputChange={(event, newInputValue, reason) => {
if (reason === 'clear') {
setResponsible(null)
return
} else {
setResponsible(newInputValue)
}
}}
renderInput={(params) => <TextField {...params}
label="select responsible"
variant="outlined"
defaultValue={responsible}
/>}
/>
)}
/>