1

I started using meteor apollo starter kit https://github.com/apollostack/meteor-starter-kit , and I created a collection "Posts" and I am able to pull data in to the UI. But when I update collection from mongo console, it is not updating UI automatically... am I missing some configuration? can any one help me here?

Here is the code:

Schema and resolvers:

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
    }
};

App Component:

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;

Client/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'));
});

Server/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});
Naveen Konduru
  • 11
  • 2

1 Answers1

1

Apollo, unlike Meteor pubsub, doesn't by default send updates to the client. You can set it up using one of these methods:

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

Loren
  • 13,903
  • 8
  • 48
  • 79
  • Thanks for your answer. The link http://dev.apollodata.com/react/receiving-updates.html helped me to solve my problem. – Naveen Konduru Nov 13 '16 at 19:14
  • in my case polling worked fine, but I was not able to figure out how to use subscriptions. is there any working examples with meteor apollo ? help is much appreciated! – Naveen Konduru Nov 13 '16 at 20:43
  • I haven't done it, but you should be able to configure everything you need with arguments to these functions: http://dev.apollodata.com/core/meteor.html#API – Loren Nov 13 '16 at 23:41