Question

今天，我决定更新我的react项目的依赖项，而我的组件Home不再起作用，我实际上正在使用apollo客户端和apollo react钩子，这是mi 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：无法读取未定义的属性'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

我会拿您的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

阿波罗中的读写缓存查询以不变的方式工作。为此，您必须使用一个新变量，您正在使用数据写入缓存。尝试这样做：

  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);

反应TypeError：无法读取未定义的属性'getDates'

3 个答案: