Запустите запрос вручную через compose (graphql ()) - PullRequest
Новая
       17

Запустите запрос вручную через compose (graphql ())

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

Я новичок в Apollo и graphql, и я пытаюсь настроить сайт электронной коммерции с API магазина Shopify. Сайт построен с реакции и Next.js для SSR.

Мне удалось получить шаблонный код, работающий для базовых взаимодействий корзины с shopify. У меня есть компонент Page, который оборачивает все приложение и находится ниже ApolloProvider с доступом к клиенту apollo. В настоящее время я использую compose (), чтобы заполнить свой компонент Page некоторым графиком (, взятым из этого примера ): 

const pageWithData = compose(
  graphql(query), // Query that retrieves base shopify information, such as shop name, description and products
  graphql(createCheckout, {name: "createCheckout"}), // Mutation that creates a new checkout object with shopify. Basically a cart object
  graphql(checkoutLineItemsAdd, {name: "checkoutLineItemsAdd"}), // Mutation that adds a new lineitem to the checkout object
  graphql(checkoutLineItemsUpdate, {name: "checkoutLineItemsUpdate"}), // Mutation that updates a line item
  graphql(checkoutLineItemsRemove, {name: "checkoutLineItemsRemove"}), // Mutation that removes a lineitem
)(Page);

Это все работает, как и ожидалось. За исключением случаев, когда я обновляю браузер, корзина очищается, и создается новый объект оформления заказа. Поэтому я хочу сохранить идентификатор извлечения в localStorage и проверить, есть ли идентификатор в localstorage, перед созданием нового объекта извлечения. Если есть, я загружу эту проверку вместо. прямо сейчас оформление заказа создается примерно так в компоненте Page: 

componentWillMount() {
    this.props.createCheckout({
        variables: {
            input: {}
        }}).then((res) => {
        this.setState({
            checkout: res.data.checkoutCreate.checkout
        });
    });
}

Теперь я нашел работающий запрос graphql для загрузки существующей проверки на основе идентификатора: 

const checkoutFetchQuery = gql`
  query checkoutFetch ($checkoutId: ID!) {
      node(id: $checkoutId) {
        ... on Checkout {
          webUrl
          subtotalPrice
          totalTax
          totalPrice
          lineItems (first:250) {
            pageInfo {
              hasNextPage
              hasPreviousPage
            }
            edges {
              node {
                title
                variant {
                  title
                  image {
                    src
                  }
                  price
                }
                quantity
              }
            }
          }
        }
      }
    }
`;

И поэтому я подумал, что могу просто добавить это к методу compose следующим образом: 

const pageWithData = compose(
  graphql(query), // Query that retrieves base shopify information, such as shop name, description and products

  graphql(checkoutFetchQuery, { name: "fetchCheckout"}), // Query that fetches checkout based on a checkoutID

  graphql(createCheckout, {name: "createCheckout"}), // Mutation that creates a new checkout object with shopify. Basically a cart object
  graphql(checkoutLineItemsAdd, {name: "checkoutLineItemsAdd"}), // Mutation that adds a new lineitem to the checkout object
  graphql(checkoutLineItemsUpdate, {name: "checkoutLineItemsUpdate"}), // Mutation that updates a line item
  graphql(checkoutLineItemsRemove, {name: "checkoutLineItemsRemove"}), // Mutation that removes a lineitem
)(Page);

Но это приводит к следующей ошибке из инструментов разработчика Apollo: 

GraphQL Errors: Variable checkoutId of type ID! was provided invalid value

Я уверен, что это я не понимаю какую-то ключевую концепцию того, как compose () работает в Reaction-Apollo. Я понимаю, что мне нужно заполнить запрос некоторыми переменными, но по какой-то причине этот запрос, похоже, запускается сразу при загрузке, тогда как, как я ожидал, это просто сделает запрос доступным для компонента. Некоторые другие операторы graphql () также ожидают переменные, такие как «checkoutLineItemsAdd», но это не приводит к ошибкам. Еще одна вещь, которую я заметил, заключается в том, что мутации добавляются как функции в подпорки компонента, где мой запрос добавляется как объект.

Я изо всех сил пытаюсь найти хорошую документацию по этому вопросу.

  • Запросы выполняются немедленно?
  • Ожидают ли мутации вызова из компонента, что позволяет нам динамически добавлять переменные?
  • Должен ли я написать свой синтаксис gql по-другому, чтобы он стал функцией компонента вместо объекта?
  • Как динамически передавать переменные в запросы, когда они присоединены к составному HOC?
  • Как я получаю ошибки из этого запроса, а не мутации, которые также ожидают переменные перед запуском?

1 Ответ

1 голос
/ 20 июня 2019

Ваш запрос требует ввода checkoutId, который имеет тип ID.

Но ваш запрос graphql(checkoutFetchQuery, { name: "fetchCheckout"}) выполняется без ввода.Вы можете добавить входные переменные следующим образом: 

graphql(checkoutFetchQuery, {
  name: "fetchCheckout",
  options: {
    variables: {
      checkoutId: localstorage.get('checkoutid')
    }
  }
})

Документация для конфигурации параметров здесь

Вы также можете пропустить запрос из автоматического запуска, добавив проверку пропускапод опциями типа 

options: {
  skip: !localstorage.get('checkoutid')
}
...