当我们从Mongo控制台更新集合时,Meteor Apollo没有更新UI

时间:2016-11-12 22:04:55

标签: apollostack apollo-server react-apollo

我开始使用meteor apollo入门套件https://github.com/apollostack/meteor-starter-kit ,我创建了一个集合“帖子”,我能够将数据提取到UI。但是当我从mongo控制台更新集合时,它不会自动更新UI ...我是否缺少一些配置?有人能帮我一下吗?

以下是代码:

架构和解析器:

import {Random} from 'meteor/random';

const Posts = new Mongo.Collection('posts');
export const typeDefs = [`

  type Post {
    _id: String
    title: String
  }


  type Query {
    myPosts: [Post]
  }

  schema{
    query: Query
  }

`];

export const resolvers = {
    Query: {
        myPosts(root, args) {
            return Posts.find().fetch();
        }

    },
    Post: {
        title: ({title}) => title
    }
};

应用程序组件:

import React, {Component} from 'react';
import {graphql} from 'react-apollo';
import {Meteor} from 'meteor/meteor';
import {createContainer} from 'meteor/react-meteor-data';
import gql from 'graphql-tag';

const App = ({userId, loading, error, myPosts, refetch}) => {
    return (
        <div>{userId}
            <button onClick={() => refetch()}>Refetch!</button>
            {myPosts && myPosts.map((post, index) => {
                return (
                    <div key={index}>{post.title}</div>
                );
            })}
        </div>
    );

};

App.propType = {
    userId: React.PropTypes.string.isRequired,
    posts: React.PropTypes.Object,
    refetch: React.PropTypes.func
};

const GET_USER_DATA = gql `
  {
    myPosts{
      title
    }
  }
`;

const withData = graphql(GET_USER_DATA, {
    props: ({data}) => {
        console.log(data);
        const {loading, error, myPosts, variables, refetch} = data;

        if (loading)
            return {loading};
        if (error)
            return {error};
        return {myPosts, refetch};

    },
    options: (ownProps) => ({
        variables: {
            id: "myownvariable"
        }
    })
});

const AppWithData = withData(App);

const AppWithUserId = createContainer(() => {
    return {userId: "sampleuserid"};
}, AppWithData);

export default AppWithUserId;

客户端/ main.js

import {Meteor} from 'meteor/meteor';
import {render} from 'react-dom';
import React from 'react';

import ApolloClient from 'apollo-client';
import {meteorClientConfig} from 'meteor/apollo';
import {ApolloProvider} from 'react-apollo';

import App from '/imports/ui/App';

const client = new ApolloClient(meteorClientConfig());

Meteor.startup(() => {
    render(
        <ApolloProvider client={client}>
        <App/>
    </ApolloProvider>, document.getElementById('app'));
});

服务器/ main.js

import {createApolloServer} from 'meteor/apollo';
import {makeExecutableSchema, addMockFunctionsToSchema} from 'graphql-tools';

import {typeDefs, resolvers} from '/imports/api/schema';

const schema = makeExecutableSchema({typeDefs, resolvers});

createApolloServer({schema});

1 个答案:

答案 0 :(得分:1)

Apollo与Meteor pubsub不同,默认情况下不会向客户端发送更新。您可以使用以下方法之一进行设置:

http://dev.apollodata.com/react/receiving-updates.html