Vue 数据流最佳实践:nuxt vue graphql apollo (maybe no vuex)

@JimmyLv 2019-05-22 14:57:27发表于 JimmyLv/jimmylv.github.io

graphql mutation 要以input为入参
pages/xxx apollo.js components.js
query就该离得最近, 子组件也由自己去取
或者就使用fragememts吧,如果想合并请求,或者是考虑page route 入参
SSR渲染,只可能发生在fetch或者async data,但是这样的话 apollo怎么到data呢?

::: tip You have access to this in options like variables, even on the server! :::

import gql from 'fraql'

export default {
  name: 'PDP',
  components: {
    productDetail,
    pdpAppealTo,
    swiper,
    swiperSlide,
    recommendProduct,
    MoreBrandProduct,
    GuestYouLink,
    RecommendPopup,
    lazyImg,
    LittleRedBook,
  },
  data() {
    return {
      sku: null,
      selectedOptions: {},
      lowStock: false,
      sellOut: false,
      offSheld: false,
      skuOff: false,
      show: true,
      brand: '',
      lodingImage: true,
      imageList: [],
    }
  },
  apollo: {
    name: gql`{
    shop {
      name
    }
  }
  `,
    detail: {
      query: gql`
      query productDetail($codes: [String!]!) {
        shop {
          bffSpusByCodes(codes: $codes) {
            type
            preSaleAttribute {
              startTime
              endTime
              scheduledDeliveryTime
            }
            spu {
              isPreSale
              id
              seo {
                seoTitle
                seoKeywords
                seoDescription
              }
              code
              promotions {
                name
                label
                description
                ruleDesc
                id
                beginTime
                endTime
                gifts{
                  name
                  number
                }
              }
              title
              onShelves
              productType
              brand {
                imageUrl
                code
                name
                description
              }
              categories {
                name
                code
                path
              }
              images {
                url
              }
              subTitle
              description
              inventory
              sales
              skus {
                id
                code
                isEnabled
                inventory
                featuredType
                activityPrice {
                  promotionPrice {
                    amount
                    currencyCode
                  }
                }
                promotions {
                  name
                  label
                  activityType
                  promotionScope
                  description
                  ruleDesc
                  id
                  beginTime
                  endTime
                  gifts{
                    name
                    number
                  }
                }
                salePrice {
                  amount
                  currencyCode
                }
                listPrice {
                  amount
                  currencyCode
                }
                options {
                  code
                  frontName
                  value {
                    code
                    frontName
                    displayName
                    images {
                      url
                    }
                    thumbnails {
                      url
                    }
                  }
                }
                preDays
              }
              bffSkus {
                isWish
                sku {
                  id
                  code
                  isEnabled
                  inventory
                  featuredType
                  activityPrice {
                    promotionPrice {
                      amount
                      currencyCode
                    }
                  }
                  promotions {
                    name
                    label
                    activityType
                    promotionScope
                    description
                    id
                    beginTime
                    endTime
                    gifts{
                      name
                      number
                    }
                  }
                  salePrice {
                    amount
                    currencyCode
                  }
                  listPrice {
                    amount
                    currencyCode
                  }
                  options {
                    code
                    frontName
                    value {
                      code
                      frontName
                      displayName
                      images {
                        url
                      }
                    }
                  }
                  preDays
                }
              }
              listPrice {
                currencyCode
                amount
              }
              salePrice {
                currencyCode
                amount
              }
              options {
                code
                frontName
                values {
                  code
                  url
                  displayName
                  images {
                    url
                  }
                  thumbnails{
                    url
                  }
                }
              }
              attributes {
                code
                frontName
                values {
                  url
                  displayName
                }
              }
            }
          }
        }
      }
    `,
      variables() {
        return { codes: [this.productId] }
      },
    },
  },