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

Posted 2023-03-08

【中文标题】仅在第一次以惯用方式和优雅方式呈现组件时执行 react-apollo-hooks useQuery

【英文标题】：Execute react-apollo-hooks useQuery Only the First Time a Component Renders Idiomatically and Elegantly

【发布时间】：2019-09-27 13:57:54

【问题描述】：

我用的是最优秀的react-apollo-hooks library，特别是useQuery hook：

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));
    
    ...

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

【参考方案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 上提出了这个问题。我发现有一个答案可以帮助我解决这个问题，因此也将其添加到这里，以便它可以帮助其他人。