reactjs - 仅在第一次以惯用方式和优雅方式呈现组件时执行 react-apollo-hooks useQuery

Question

我正在使用最优秀的react-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 状态，组件就会重新渲染，并且 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));
    }
    ...
}

这很不错。但我能做得更好吗？

Answer 1

你可以做这样的事情。此外，您可能还希望避免将查询结果设置为 useState，而直接使用数据。

const [skip, setSkip] = React.useState(false)
const { loading, data } = useQuery(QUERY, { skip })

React.useEffect(() => {
  // check whether data exists
  if (!loading && !!data) {
    setSkip(true)
  }
}, [data, loading])

---

@Robert，我发现您在apollo-hooks github上提出了这个问题。而且我发现有一个答案可以帮助我解决这个问题，因此也将其添加到此处，以便它可以帮助其他人。