你如何发布和订阅不是 Mongo db 的数据? [英] How do you publish and subscribe to data that's not Mongo db?

问题描述

有一个 Meteor.publish 设置执行一些异步请求(例如一个 API)然后返回你想要在 React 组件中显示的数据的过程是什么?发布如何工作以及客户端代码如何访问它?如果可能的话，我想用 withTracker 函数来做到这一点.谢谢！

What's the process to have a Meteor.publish setup that performs some asynchronous request (e.g. an API) and then returns data which you want to display in a React component? How does the publish work and how does the client side code access this? I want to do this with the withTracker function if possible. Thanks!

推荐答案

本指南应该会有所帮助:出版物和数据加载.

This guide should help: Publications and Data Loading.

基本上，您需要了解 Meteor 的低级 API 工作，以便您知道如何将您想要的任何数据集发布到客户端 Mongo 集合.此外，要从其他 API 端点发布数据，本部分指南的部分展示了一个非常清晰的例子.

Basically, you need to understand how Meteor's low-level API works so that you know how to publish any data set you want to a client-side Mongo collection. Also, to publish data from other API endpoints, this part of the guide shows a pretty clear example.

至于在客户端订阅这种自定义发布，就像订阅典型的 MongoDB 类型发布一样简单.请注意，不同之处在于，正如我上面提到的，您是从 客户端发布/订阅-边收集.

As for subscribing this kind of customized publication on the client side, it's just as simple as how you subscribe from typical MongoDB type publication. Note that the difference is, as I mentioned above, you are publishing to/subscribing from a Client-side collection.

下面是我自己写的一个简单的例子.我不太了解 React，但客户端代码主要基于 Meteor 的教程:

Below is a simple example I wrote by myself. I don't really know about React, but the client code is mostly based on Meteor's tutorials:

• 收藏
• 发布和订阅

/* client side */
import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { Meteor } from 'meteor/meteor'; 
import { Mongo } from 'meteor/mongo';

const Foo = new Mongo.Collection('Foo');

class App extends Component {
  renderFoo() {
    return this.props.foos.map((foo) => (
      <Foo key={foo._id} foo={foo} />
    ));
  }
}

export default withTracker(() => {
  Meteor.subscribe('publishFromAnApi', ...args);
  return {
    foos: Foo.find().fetch(),
  };
})(App);


/* server side */
import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

Meteor.publish('publishFromAnApi', function publishFromAnApi(...args) {  // must use a function instead of an arrow function here for the sake of `this`
  const publishedKey = {};
  const collectionName = 'Foo'; // same name of the client side collection mentioned in line 6

  const poll = () => {
    const { data } = HTTP.get('/some/api/route', { ...someArgsToRequest });
    for (let i = 0; i < data.responseFromAPI; i += 1) { // just a random example here, assuming responseFromAPI is an array
      const document = data.responseFromAPI[i];
      const id = <the id of the document; normally is in Mongo.ObjectID type>;

      // some logics might be going on...

      if (!publishedKey[id]) {
        this.added(collectionName, id, document);
        publishedKey[id] = true;
      } else {
        this.changed(collectionName, id, document);
      }
    }
  };

  poll();
  this.ready();

  const interval = Meteor.setInterval(poll, <poll interval>);

  this.onStop(() => {
    Meteor.clearInterval(interval);
  });
});

流星

这篇关于你如何发布和订阅不是 Mongo db 的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！