Как динамически установить параметры запроса с помощью AWS AppSync SDK для React-Native - PullRequest
Новая
       22

Как динамически установить параметры запроса с помощью AWS AppSync SDK для React-Native

0 голосов
/ 01 декабря 2018

Справочная информация: Я работаю над созданием мобильного приложения с реактивной поддержкой и настраиваю AppSync AWS для синхронизации приложения с облачными источниками данных.

Задача : у меня есть представление, которое показывает все элементы в списке.Идентификатор списка передается как компонент для компонента.Мне нужно использовать этот идентификатор списка для запроса элементов этого списка.У меня нормально работает запрос, если я жестко закодирую идентификатор списка, но мне трудно понять, как динамически установить идентификатор списка для запроса при обновлении реквизита.

Вот что у меня работает (с жестко заданным идентификатором testList01) в моем ListPage компоненте: 

const getListItems = id => gql`
    query getListItems {
      getListItems(listID: ${id}) {
        reference_id,
        quantity,
      }
    }
  `;

export default graphql(getListItems('testList01'), { 
  options: {
    fetchPolicy: 'cache-and-network',
  },
  props: props => ({
    listItems: props.data ? props.data.getListItems : [],
    data: props.data,
  }),
})(withNavigationFocus(ListPage));

Я хотел бы иметь возможность динамически устанавливатькакой список для поиска элементов на основе идентификатора списка, который передается из реквизита.В частности, я использую реагирующую навигацию для входа в ListPage, представление, где пользователь может видеть элементы списка.Итак, вот код, который выполняется, когда пользователь нажимает на имя списка и направляется в компонент ListPage: 

  handleListSelection(list: Object) {
    const { navigation, userLists } = this.props;
    navigation.navigate('ListPage', {
      listID: list.record_id,
      listName: list.list_name,
      userLists,
    });
  }

Из моей предыдущей (pre-AppSync / GraphQL) реализации я знаю, что могу получить доступидентификатор списка в ListPage через this.props.navigation.state.params.listID.Я хотел бы иметь возможность использовать это в своем запросе AppSync, но так как запрос создается вне компонента, я не могу получить доступ к реквизитам, и поэтому изо всех сил пытаюсь получить идентификатор.

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Получил эту работу, используя пакет под названием реагировать-apollo-dynamic-query, который я нашел здесь .Автор этого пакета также ссылается непосредственно на простую функцию для выполнения того, что я пытаюсь сделать здесь.По сути, он просто оборачивает обычный вызов graphql простым способом, который выставляет реквизиты, чтобы они могли быть переданы в запрос.

Мой код теперь выглядит примерно так (что у меня ниже моего определения компонента ListPage в том же файле): 

const getListItems = props => {
   const listID = props.navigation.state.params.listID;
   return gql`
      query getListItems {
        getListItems(listID: "${listID}") { // Note the variable being wrapped in double quotes
          reference_id,
          quantity,
         }
       }
   `;
};

const config = {
  options: {
    fetchPolicy: 'cache-and-network',
  },
  props: props => ({
    listItems: props.data ? props.data.getListItems : [],
  }),
};

const MyApolloComponent = graphqlDynamic(getListItems, config)(ListPage);

export default MyApolloComponent;
0 голосов
/ 01 декабря 2018

Это должно работать так: 

const getListItems = (id) => {
  return gql`
    query getListItems {
      getListItems(listID: ${id}) {
        reference_id,
        quantity,
      }
    }
  `;
}

Назовите этот getListItems, как показано ниже 

export default graphql(getListItems(id), { //from where ever you want to send the id
  options: {
    fetchPolicy: '
    ......

Я не проверял этот код.Пожалуйста, обновите, если это работает.Хотя я совершенно уверен, что это работает.

Надеюсь, это поможет.Happy Coding:)

...