Vue Apollo: Как я могу запросить GraphQL, используя объект в качестве входного аргумента? - PullRequest
Новая
       34

Vue Apollo: Как я могу запросить GraphQL, используя объект в качестве входного аргумента?

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

Я хотел бы создать объект оформления заказа через API GraphQL, предоставляемый платформой Saleor eCommerce.

В соответствии с игровой площадкой gql существует мутация, которая принимает объект CheckoutCreateInput в качестве аргумента.

Вот пример мутации, которая отлично работает на детской площадке.

example gql

Вот текущий код, который я пробовал (я делаю это в рамках действия vuex) 

export const actions = {
  addToCart({ commit, dispatch }, cartItem) {
    const currentCartItems = this.state.cartItems
    // Check to see if we already have a checkout object
    if (this.state.checkoutId !== '') {
      // Create a new checkout ID
      console.log('creating new checkout object')
      try {
        this.app.apolloProvider.defaultClient
          .mutate({
            mutation: CREATE_CART_MUTATION,
            variables: {
              checkoutInput: {
                lines: { quantity: 10, variantId: 'UHJvZHVjdFZhcmlhbnQ6NQ==' },
                email: 'test@test.com'
              }
            }
          })
          .then(({ data }) => {
            console.log(data)
          })
      } catch (e) {
        console.log(e)
      }
    } else {
      console.log('checkout id already set')
    }

    // TODO: Check to see if the cart already contains the current Cart Item

    commit('ADD_CART_ITEM', cartItem)
  }

и вот CREATE_CART_MUTATION: 

import gql from 'graphql-tag'

export const CREATE_CART_MUTATION = gql`
  mutation($checkoutInput: CheckoutCreateInput!) {
    checkoutCreate(input: $checkoutInput) {
      checkout {
        id
        created
        lastChange
        lines {
          id
          variant {
            id
            name
          }
          quantity
          totalPrice {
            gross {
              localized
            }
            net {
              localized
            }
          }
        }
        totalPrice {
          gross {
            localized
          }
          net {
            localized
          }
        }
      }
    }
  }
`

На сервере это возвращается со следующей ошибкой: 

graphql.error.base.GraphQLError: Variable "$checkoutInput" got invalid value {"email": "test@test.com", "lines": {"quantity": 10, "variantId": "UHJvZHVjdFZhcmlhbnQ6NQ=="}}.
In field "lines": In element #0: Expected "CheckoutLineInput", found not an object.

1 Ответ

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

Похоже, я проходил большую часть пути, я просто передавал объект из одной строки, а не их массив.Правильный код выглядит следующим образом: 

try {
  this.app.apolloProvider.defaultClient
    .mutate({
      mutation: CREATE_CART_MUTATION,
      variables: {
        checkoutInput: {
          lines: [
            { quantity: cartItem.quantity, variantId: cartItem.variantId }
          ],
          email: 'test@test.com'
        }
      }
    })
    .then(({ data }) => {
      console.log('mutation done!')
      commit('SET_CHECKOUT_OBJECT', data.checkoutCreate.checkout)
    })
} catch (e) {
  console.log('error:')
  console.log(e)
}
...