Apollo useQuery 钩子不会使用 writeQuery() 方法从缓存中获取更新。没有看到错误

Question

使用后useMutation()，缓存会更新，但useQuery()在 Home 组件中不会。

我尝试使用不同的fetchPolicy. 我可以在 Apollo 开发工具中看到新帖子，但需要更新页面才能看到更改

import { FETCH_POSTS_QUERY } from '../utils/graphql';

function Home() {
  const { user } = useContext(AuthContext);
  const {
    loading,
    data
  } = useQuery(FETCH_POSTS_QUERY, {
    fetchPolicy: 'cache-and-network',
  });
...

import { useMutation } from '@apollo/react-hooks';

import { useForm } from '../utils/hooks';
import { FETCH_POSTS_QUERY } from '../utils/graphql';

function PostForm() {
  const { values, onChange, onSubmit } = useForm(createPostCallback, {
    body: ''
  });

  const [createPost, { error }] = useMutation(CREATE_POST_MUTATION, {
    variables: values,
    update(proxy, result) {
      const data = proxy.readQuery({
        query: FETCH_POSTS_QUERY
      });
      data.getPosts.push(result.data.createPost);
      proxy.writeQuery({ query: FETCH_POSTS_QUERY, data });
      values.body = '';
    }
  });

  function createPostCallback() {
    createPost();
  }
...

...
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
import { ApolloProvider } from '@apollo/react-hooks';
import { setContext } from 'apollo-link-context';

const httpLink = createHttpLink({
  uri: 'http://localhost:5000'
});

const authLink = setContext(() => {
  const token = localStorage.getItem('jwttoken');
  return {
    headers: {
      Authorization: token ? `Bearer ${token}` : ''
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

...

我希望在不更新页面的情况下看到新帖子。

Answer 1

此代码段解决了使用 PostForm 编写缓存时前端刷新的问题：

//在 Home.js 中使用这个：

const [posts, setPosts] = useState([]);
const { user } = useContext(AuthContext);
const { loading, data } = useQuery(FETCH_POSTS_QUERY);
useEffect(() => {
    if (data) {
        setPosts(data.getPosts);
    }
}, [data]);

在 PostForm.js 中使用这个：

const [createPost, { error }] = useMutation(CREATE_POST_MUTATION, {
    variables: values,
    update(proxy, result) {
        const data = proxy.readQuery({
            query: FETCH_POSTS_QUERY
        });
        const new_post = result.data.createPost;
        proxy.writeQuery({
            query: FETCH_POSTS_QUERY,
            data: { getPosts: [new_post, ...data.getPosts] }
        });
        values.body = '';
    }
});

这个解决方案不是我的主意，而是一位代码英雄帮助我们:)

参考链接：https : //gist.github.com/josuecatalan/5b8bf73e69d55683ccf237d5d02b5cef

原创内容：https : //www.youtube.com/watch?v=F_SdB42DxdQ&list=PLMhAeHCz8S3_pgb-j51QnCEhXNj5oyl8n&index=6

Answer 2

您正在使用此处修改缓存数据push：

data.getPosts.push(result.data.createPost);

然后按原样返回

proxy.writeQuery({ query: FETCH_POSTS_QUERY, data });

由于这是 javascript 并且对象是通过引用传递的，因此data您返回的对象与您收到的对象相同，因此 apollo 没有意识到它已经改变。请尝试以下操作：

proxy.writeQuery({ query: FETCH_POSTS_QUERY, data: { ...data } });