从promise获取数据并在hook中使用

Question

我想让钩子从快照中获取数据以显示建议。我使用graphql-request库来获取数据。我想在组件中获得这些数据，例如：const { data } = useSnapshotProposalsQuery()。我该怎么做？现在我只能得到const data = useSnapshotProposalsQuery()，当我是console.log(data)时，我得到Promise{<opening>}。我的代码：

import { gql, request } from 'graphql-request';
export const useSnapshotProposals = gql`
query Proposals {
proposals(
first: 20
skip: 0
where: { space_in: ["example.eth"] }
orderBy: "created"
orderDirection: desc
) {
id
title
body
choices
start
end
snapshot
state
author
space {
id
name
}
}
}
`;
export const useSnapshotProposalsQuery = () => {
return request('https://hub.snapshot.org/graphql', useSnapshotProposals).then((data) => data);
};

Answer 1

您可以创建一个自定义挂钩。并且该钩子返回一个状态。当钩子内部发生副作用时，状态会更新，外部组件也会重新呈现。(反应文档(

export const useSnapshotProposalsQuery = () => {
const [myData, setMyData] = useState(null);
useEffect(()=>{
request('https://hub.snapshot.org/graphql', useSnapshotProposals).then((data) => {setMyData(data)});
}, []); // run only one time
return myData;
};

在外部组件中：

function ABCcomponent () {
const myData = useSnapshotProposalsQuery(); // it will be null at first, but will be filled with data later.

return (
/*ui that uses myData */
)
}