GraphQl refetch does not always work on TextField clear value

Viewed 37

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}
                                />}
                            />
                        )}
                    />
1 Answers

You actually don't need to call refetch(), since your query is using date state. When you call setDate(e.target.value), your component re-renders, and useQuery will be recalled with the updated date. Recalling refetch() in this case is like doing the same thing two times. Remove it, it may resolve your issue.

Related