Question

我具有以下vue组件：

<!-- Cart.vue -->
<template>
  <div>
    {{ cart.totalGrossPrice }}
  </div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    cart: {
      query: gql`
        query Cart {
          cart @client {
            totalGrossPrice
          }
        }
    }
  }
}
</script>

我想在我的故事书中显示它。为此，我定义了一个schema.graphql（与生产应用程序相同）：

# schema.graphql
type Cart {
  totalGrossPrice: Float!
}

和模拟：

// mocks.js
export default {
  Cart: () => {
    return {
      __typename: 'Cart',
      totalGrossPrice: 0
    }
  }
}

然后我将它们编入我的故事：

// Shop.stories.js
import Vue from 'vue'

import apolloStorybookDecorator from 'apollo-storybook-vue'
import { storiesOf } from '@storybook/vue'
import Cart from '../Cart'

import typeDefs from './schema/schema.graphql'
import mocks from './schema/mocks'

storiesOf('Shop/Cart', module)
  .addDecorator(
    apolloStorybookDecorator({
      mocks,
      typeDefs,
      Vue
    })
  )
  .add('Cart', () => {
    return {
      components: {
        Cart
      },
      template: '<cart />'
    }
  })

现在，当我运行故事书并打开此组件时，出现以下错误/警告：

Found @client directives in a query but no ApolloClient resolvers were specified. This means ApolloClient local resolver handling has been disabled, and @client directives will be passed through to your link chain.

和

GraphQLError {message: "Unknown directive "client".", locations: Array(1), path: undefined, nodes: Array(1), source: Source, …}

和

TypeError: Cannot read property 'totalGrossPrice' of undefined

还有其他

我该怎么做才能使其正常工作？该组件在生产应用程序中运行良好。我试图用typeResolvers中的apolloStorybookDecorator代替我的模拟，但没有成功。也许我做错了方法。

如何在我的故事书中模拟vue阿波罗状态管理？

0 个答案: