Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 组件在调用store.writeQuery()后不会重新呈现_Reactjs_Graphql_Apollo - Fatal编程技术网

Reactjs 组件在调用store.writeQuery()后不会重新呈现

Reactjs 组件在调用store.writeQuery()后不会重新呈现,reactjs,graphql,apollo,Reactjs,Graphql,Apollo,因此,我将在上学习graphql+apollo教程,我有一系列“链接”组件,当向上投票时,这些组件将显示新的投票数。到目前为止,它不会重新呈现时,我不得不刷新页面 我试图通过使用更新的数据调用store.writeQuery()来实现这一点。我检查了,我传入的数据对象确实与旧的不同: 以下是我的初始设置: import { ApolloProvider } from "react-apollo"; import { ApolloClient } from "apollo-client"; imp

因此,我将在上学习graphql+apollo教程,我有一系列“链接”组件,当向上投票时,这些组件将显示新的投票数。到目前为止,它不会重新呈现时,我不得不刷新页面

我试图通过使用更新的数据调用store.writeQuery()来实现这一点。我检查了,我传入的数据对象确实与旧的不同:

以下是我的初始设置:

import { ApolloProvider } from "react-apollo";
import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory"
import { setContext } from "apollo-link-context";
import App from './components/App';
import {AUTH_TOKEN} from "./constants.js";

const authLink = setContext((_, { headers }) => 
{
    const token = localStorage.getItem(AUTH_TOKEN);
    return {
        headers: {
        ...headers,
        authorization: (token ? "Bearer " + token : ""),
    }
  }
});

const httpLink = createHttpLink({
    uri: "http://localhost:4000"
});

const apolloClient = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
})
以下是突变成分:

<Mutation 
            mutation={VOTE_MUTATION}
            variables={{id: this.props.link.id}}
            update={(store, { data: { upVote } }) =>
            {
              const data = store.readQuery({ query: FEED_QUERY });

              const votedLink = data.feed.links.find(link => link.id === this.props.link.id);
              votedLink.votes = upVote.link.votes;
              console.log(data);
              store.writeQuery({ 
                query: FEED_QUERY, 
                data,
              });
            } }
            >
            {
            mutationCallback =>
              (<div className="ml1 gray f11" style={{cursor: "pointer"}} onClick={mutationCallback}>
                ▲
              </div>)
            }
              </Mutation>

我调用store.readQuery()和store.writeQuery(),期望向上投票的链接将重新排序以显示新的投票数。我还记录传入的数据对象,以确保它已被更新,并且已更新。但没有重新招标。可能有什么问题?

添加到Apollo客户端dataIdFromObject以获取更多信息,请参见:

const FEED_QUERY = gql`
{
    feed
    {
        links
        {
            id url description createdAt 
            createdBy{
                name email
            } 
            votes{
                id
            }
        }
    }
}
`;
const apolloClient = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
    dataIdFromObject: o => o.id 
})