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

Start by reviewing the pages/xxx apollo.js and components.js examples, then trace how Nuxt fetch and asyncData handle Apollo data during SSR. Compare the proposed mutation inputs, query placement, fragments, and route variables. The issue does not define a specific implementation or acceptance criteria, so completion would require an agreed-upon data-flow design.

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] }
      },
    },
  },