1

我开始使用流星阿波罗入门套件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});
4

1 回答 1

1

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

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

于 2016-11-13T04:27:00.823 回答