Как использовать Meteor.settings в компоненте React - PullRequest
Новая
       24

Как использовать Meteor.settings в компоненте React

0 голосов
/ 25 июня 2019

У меня есть компонент React, который выполняет вызов API на init на стороне клиента .Я не хочу жестко кодировать мой ключ API (не дай бог в репо), и не намного лучше поместить его в Meteor.settings.public, поскольку его можно просто найти в консоли.Я хочу сохранить его в Meteor.settings, но тогда он будет невидим для клиента.Я пытался использовать метод, но, хотя он работает на сервере, вызов метода возвращает неопределенный на клиенте.

На сервере: 

Meteor.methods({
  getFileStackAPIKey: function () {
      if (Meteor.settings.fileStackAPIKey) {
          console.log(Meteor.settings.fileStackAPIKey) // returns: [fileStackAPIKey] correctly
          return Meteor.settings.fileStackAPIKey
      }
      else {
          return {message: "Configure Meteor.settings.fileStackAPIKey to connect to FileStack."}
      }
  }});

На клиенте: 

console.log(Meteor.call('getFileStackAPIKey')); // returns: undefined

Я попытался использовать ReactiveVar, и он снова установил его на сервере, но был недоступен на сервере.клиент.У меня такое чувство, что мне не хватает чего-то очевидного.В частности, я пытаюсь заставить работать файл FileStack.Их пример кода показывает встроенный встроенный ключ API.Как и официальный пакет FileStack React.Это просто не кажется хорошей идеей.

1 Ответ

0 голосов
/ 26 июня 2019

Это связано с обратными вызовами. Результат метода будет в обратном вызове, поэтому то, что мне нужно было сделать на клиенте, было похоже на это: 

Meteor.call('getFileStackAPIKey', (err, res) => {
    console.log("FileStack API Key: " + res);
});

Но поскольку я действительно хотел передать его в инициализацию FileStack (опять же на стороне клиента), поэтому мне нужно было поместить в конструктор объекта FileStack следующее: 

// "this" is the FileStack object we're constructing
const fileStackObj = this;
Meteor.call('getFileStackAPIKey', (err, apiKey) => {
    // here we're inside the callback, so we have the resulting API key
    const client = filestack.init(apiKey, clientOptions);
    // these are synchronous actions dependent on the existence of "client"
    // that we could not do outside of the callback
    fileStackObj.state = {
        client,
        picker: action === 'pick' ? client.picker({ ...actionOptions, onUploadDone: fileStackObj.onFinished }) : null,
    };
    fileStackObj.onFinished = fileStackObj.onFinished.bind(fileStackObj);
    fileStackObj.onFail = fileStackObj.onFail.bind(fileStackObj);
});
...