React TypeError：无法读取未定义的属性“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>

    );

}

我在浏览器中收到此错误： “TypeError：无法读取未定义的属性‘getPosts’”

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

function Home(props){

    let posts = '';

    const { user } = useContext(AuthContext);

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

    if (data) {

        posts = data.getPosts;

    }

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

编辑：这是来自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 = '';

        }

    });

知道如何解决第一个代码问题吗？提前谢谢各位朋友！

Answer 1

apollo 中对读写缓存的查询以不可变的方式工作。为了做到这一点，您必须使用一个新变量，您正在使用数据来写入缓存。尝试这样做：&nbsp; const [createPost] = useMutation(CREATE_POST_MUTATION, {&nbsp; &nbsp; variables: values,&nbsp; &nbsp; update (proxy, result) {&nbsp; &nbsp; &nbsp; const data = proxy.readQuery({&nbsp; &nbsp; &nbsp; &nbsp; query: FETCH_POSTS_QUERY&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; const new_post = result.data.createPost //here's the new var&nbsp; &nbsp; &nbsp; proxy.writeQuery({&nbsp; &nbsp; &nbsp; &nbsp; query: FETCH_POSTS_QUERY,&nbsp; &nbsp; &nbsp; &nbsp; data: { getPosts: [new_post, ...data.getPosts] } // here you're using that var to write the cache&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; values.body = ''&nbsp; &nbsp; }&nbsp; })

Answer 2

我通过将数据定义为对象 {} 修复了相同的错误，只是通过添加更改了以下代码= {}const {&nbsp; loading,&nbsp; data: { getPosts: posts } = {}} = useQuery(FETCH_POSTS_QUERY);

Answer 3

我会接受您的if声明并将其设置在 a 中，useEffect以便它检查数据是否是真实的 onLoad，这样您就可以在数据更改时将其同步。const [posts, setPosts] = useState([]);useEffect(() => {&nbsp; if (data) {&nbsp; &nbsp; setPosts(data.getPosts);&nbsp; }},[data])if (posts.length === 0) {&nbsp; return <h3>No posts as of yet</h3>}