如何转换从@apolo/react钩子接收的数据

Question

我正在使用``query:

const GET_COMMENTS = gql`
query getComments {
getComments (where: {code: "/about-us" }) {
id
text
createdAt
}
}
`
....
const { loading, error, data } = useQuery(GET_COMMENTS);

在我的代码中。。。

代码是从服务器中获取注释。注释对象是date: string!属性，我想将这个date: string!转换为javascript日期(new Date(comment.date)(。如何在数据获取后直接执行？

我不想变换调用的每个渲染。

有这样的东西吗

const { loading, error, data } = 
useQuery(
GET_COMMENTS, 
{
transform: (data) => data.map(comment => ({...comment , date: new Date(comment.date)}) )
}
);

谢谢你的帮助！

Answer 1

缓存类型策略中的合并函数就是您想要的。它允许您定义将传入数据写入缓存的自定义策略。

创建缓存时，可以定义如何写入特定字段。假设date字段属于Comment类型：

const cache = new InMemoryCache({
typePolicies: {
Comment: {
fields: {
date: {
merge(_, date) {
return new Date(date);
},
},
},
},
},
});

Answer 2

试试这个：

const { loading, error, data } = useQuery(GET_COMMENTS, {
onCompleted: data => {
// Do changes here
}
});

你可以在这里查看https://www.apollographql.com/docs/react/api/react/hooks/

Answer 3

您可以在onCompleted中调用transformer函数，并将其结果用作状态变量。

const [myData, setMyData] = useState([]);
const { loading } = useQuery(GET_DATA_QUERY, {
variables: {
options: {
limit: 20
}
},
onCompleted: (response) => {
const transformed = tranformData(response)
setMyData(transformed)
}
});
return (
<div style={{ color: "white" }}>
{loading ? <div>Loading..</div> : <div>{myData.length}</div>}
</div>
);