React TypeError: Cannot read property 'getDates' of undefined

Question

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

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: Cannot read property 'getPosts' of undefined"

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

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

    if (data) {
        posts = data.getPosts;
    }

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

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

我会接受你的 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>
}

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

我修复了将数据定义为对象时出现的相同错误{}
刚刚通过添加 = {}

更改了以下代码

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

React TypeError: Cannot read property 'getDates' of undefined

React TypeError: Cannot read property 'getDates' of undefined

javascript

reactjs

react-hooks

react-apollo