Я использую самую превосходную библиотеку act-apollo-hooks , в частности ловушку useQuery:
function Index() {
...
const [dialogOpen, setDialogOpen] = useState({ show: false, id: '0' });
...
const { data, error } = useQuery(GET_JOBS, { suspend: true });
if (error) {
return <div>Error! {error.message}</div>;
}
const jobs = data.cxJobs; //This is our data
....
function editCallback(e, more) {
setDialogOpen({ show: true, id: e });
}
....
}
Конечно, как только я изменю состояние dialogOpen, компонент пере-renders и запрос graphql выполняется снова.Основываясь на предложении о библиотеке github repo , я переписал код для установки некоторого состояния вместе с useEffect:
function Index() {
...
const [dialogOpen, setDialogOpen] = useState({ show: false, id: '0' });
const [jobs, setJobs] = useState([]);
useEffect(_=> {fetchData()}, []);
const fetchData = async _ => {
const result = await client.query({query:GET_JOBS});
setJobs(get(['data','cxJobs'], result));
}
async function onEventChanged(id, event) {
await mutateOne(client, jobGQL, eventToJob(event));
}
...
}
Это довольно хорошо.Но могу ли я сделать лучше?