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

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! :::

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