2016-11-12 51 views
1

我開始使用meteor apollo入門工具包https://github.com/apollostack/meteor-starter-kit ,並且我創建了一個集合「Posts」,我可以將數據拉入UI。但是當我從mongo控制檯更新集合時,它不會自動更新UI ...我是否缺少一些配置?有人能幫我一下嗎?當我們從Mongo主機更新集合時,流星Apollo沒有更新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')); 
}); 

服務器/主。 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

Apollo不像Meteor pubsub,默認情況下不會向客戶端發送更新。您可以使用以下方法之一進行設置:

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

+0

感謝您的回答。鏈接http://dev.apollodata.com/react/receiving-updates.html幫助我解決了我的問題。 –

+0

在我的情況下,輪詢工作正常,但我無法弄清楚如何使用訂閱。有沒有流星阿波羅的例子?非常感謝幫助! –

+0

我還沒有做到這一點,但你應該能夠使用這些函數的參數來配置你需要的所有東西:http://dev.apollodata.com/core/meteor.html#API – Loren