反应类型错误：无法读取未定义的属性'getDates'

Question

今天我决定更新我的 React 项目的依赖项，我的组件Home不再工作，我实际上正在使用 Apollo 客户端和 Apollo React 钩子，这是 miHome组件文件：

function Home(props) {
const {
loading,
data: { getPosts: posts }
} = useQuery(FETCH_POSTS_QUERY);
return (
<Grid columns={3} stackable={true} className={loading ? 'loading' : ''}>
<Grid.Row className='page-title'>
<h1>Recent Posts</h1>
</Grid.Row>
<Grid.Row>
{user && (
<Grid.Column>
<PostForm user={user} />
</Grid.Column>
)}
{loading ? (
<Loading />
) : (
posts &&
posts.map(post=> (
<Grid.Column key={post._id} style={{ marginBottom: 20 }}>
<PostCard post={post} />
</Grid.Column>
))
)}
</Grid.Row>
</Grid>
);
}

我在浏览器中收到此错误："类型错误：无法读取未定义的属性'getPosts' ">

我正在尝试用这个小代码变体来修复它：

function Home(props){
let posts = '';
const { user } = useContext(AuthContext);
const { loading, data } = useQuery(FETCH_POSTS_QUERY);
if (data) {
posts = data.getPosts;
}

一切正常，但是如果我添加一个更新 apollo 缓存的新帖子，该缓存会正确更新旧帖子和新帖子，但前端没有显示它，只显示旧帖子，直到我手动刷新页面。

编辑： 这是来自PostForm组件的代码，我也更新了Home组件，添加了PostForm：

function PostForm(props) {
const { values, handleChange, handleSubmit } = useForm(createPostCallback, {
title: 'Example Title',
body: ''
});
const [createPost] = useMutation(CREATE_POST_MUTATION, {
variables: values,
update(dataProxy, result) {
const data = dataProxy.readQuery({
query: FETCH_POSTS_QUERY
});
data.getPosts = [result.data.createPost, ...data.getPosts];
dataProxy.writeQuery({
query: FETCH_POSTS_QUERY,
data
});
values.body = '';
}
});
function createPostCallback() {
createPost();
}

知道如何解决第一个代码问题吗？ 提前感谢伙伴们！

Answer 1

我修复了将数据定义为对象 {}
只是通过添加= {}更改了以下代码

const {
loading,
data: { getPosts: posts } = {}
} = useQuery(FETCH_POSTS_QUERY);

Answer 2

apollo 中对读写缓存的查询以不可变的方式工作。为此，您必须使用一个新变量，即使用数据来写入缓存。 尝试这样做：

const [createPost] = useMutation(CREATE_POST_MUTATION, {
variables: values,
update (proxy, result) {
const data = proxy.readQuery({
query: FETCH_POSTS_QUERY
})
const new_post = result.data.createPost //here's the new var
proxy.writeQuery({
query: FETCH_POSTS_QUERY,
data: { getPosts: [new_post, ...data.getPosts] } // here you're using that var to write the cache
})
values.body = ''
}
})

Answer 3

我会接受您的if语句并将其设置在useEffect中，以便它检查 如果数据是真实的onload，那么只要数据发生变化，您就可以将其同步到。

const [posts, setPosts] = useState([]);
useEffect(() => {
if (data) {
setPosts(data.getPosts);
}
},[data])
if (posts.length === 0) {
return <h3>No posts as of yet</h3>
}