使用GraphQL+DynamoDB来将数据输出到屏幕并查看

2 年 ago

清, 宇

2 minutes

我們想在這篇文章中使用GraphQL查詢語言，將存儲在DynamoDB中的數據實際輸出到畫面上。

请参考之前的文章，了解如何使用GraphQL、AppSync向DynamoDB插入数据。

环境

Visual Studio Code

引用的文本是关于Vue框架中的Vuetify插件的介绍。以下是对它的简化释义：

使用Vuetify组件库来增强Vue应用程序的外观和交互设计。

如果使用Vue CLI的情况下

如果使用Vue CLI的话，请。

vue add vuetify

现在你可以使用Vuetify的UI组件了。

当涉及到 Nuxt.js

对于 Nuxt.js，可以按照 Vuetify 的快速入门文档进行操作。

$ yarn add @nuxtjs/vuetify -D
# OR
$ npm install @nuxtjs/vuetify -D

在安装完成后，将其添加到 nuxt.config.js 文件的 buildModules 中。

{
  buildModules: [
    '@nuxtjs/vuetify'
  ]
}

如果你加上，就可以了。

让GraphQL可用

从 Amplify 库中导入 GraphQL 查询，并调用 API（GraphQL）。
在 plugins 文件夹中创建 amplify.js 文件，并将内容设置为以下方式：

import Amplify, { graphqlOperation } from 'aws-amplify'
import awsConfig from '@/src/aws-exports'

Amplify.configure(awsConfig)

export default ({ app }, inject) => {
  inject('graphql', (operation, vars = {}) => Amplify.API.graphql(graphqlOperation(operation, vars)))
}

只需要一种选项来用中文重新表达：
通过这样做，可以从Vue组件中

this.$graphql(...)

将可以被召唤出来了。

数据输出

我编写了一个简单的代码来输出保存在 DynamoDB 中的数据。
* default.vue→简单的主要布局
* index.vue→显示 Home.vue 组件的标题
* Home.vue→组件。将 DynamoDB 数据输出的代码切分出来。

<template lang="pug">
  v-layout(
    wrap
  )
    v-flex
      home
</template>

<script>
import Home from '~/components/Home'

export default {
  components: {
    Home
  },
  middleware: 'auth',
  data () {
  }
}
</script>

<template lang="pug">
  v-app
    v-toolbar(color="indigo" dark fixed app)
      v-toolbar-side-icon(@click.stop="drawer = !drawer")
      v-tabs(color="indigo")
        v-tab(nuxt to="/") OVERVIEW
        v-tab(nuxt to="/signup") Customer
        v-tab(nuxt to="/signin") SIGNIN
        v-tab(nuxt to="/housekeeping") HOUSE KEEPING
        v-tab(nuxt to="/reports") REPORTS

    v-content
      nuxt

    v-footer(color="indigo" app)
      span.white--text © 2017
</template>

<script>
export default {
  data: () => ({
    drawer: false
  })
}
</script>

<template lang="pug">

    v-container

      v-layout(
        row
        wrap
      )

        v-flex(
          xs12
          sm6
          md4
          lg4
          v-for="room in rooms"
          :key="room.name"
        )
          v-card.ma-3(
            flat
            v-show="checkRoom(room)"

          )

            v-card-title
              | {{ room.number }}
              v-spacer

               span(
                v-if="room.guestInfo"
               ) {{ room.guestInfo.name }}

</template>

<script>
import { listUserTypes } from '@/src/graphql/queries'
export default {
  data () {
    return {
      rooms: []
    }
  },

  created () {
    this.loadUserTypes()
  },

  methods: {
    async loadUserTypes () {
      const data = await this.$graphql(listUserTypes, {
        limit: 100
      })   
    }
  }
}
</script>

※UserType是表（table）的变量名。

本篇文章的目的是输出 DynamoDB 数据，因此将以 Home.vue 组件为中心进行解释。想要获取的数据表如下所示：

完成出力的步骤

1. 导入 list 查询

我想在list查询中获取全部数据，所以我会在query.js文件中导入listUserTypes。

import { listUserTypes } from '@/src/graphql/queries'

使用GraphQL查询将获取到的数据赋值给变量。

使用list查询获取的UserType表的数据将被赋值给rooms。


data () {
  return {
    rooms: []
  }
},

created () {
  this.loadUserTypes()
},

methods: {
  async loadUserTypes () {
    const user = await this.$graphql(listUserTypes, {
      limit: 100
    })
    this.rooms = user.data.listUserTypes.items
  }
}

loadUserTypes方法将查询到的数据赋值给存储在data中的rooms空数组。

通过将定数user替换为data.listUserTypes.items，可以将12个数据赋值给rooms。

3. 付出努力

UI的界面如下所示。

因为这样看起来无法忍受，所以我想稍作修改。
由于房间号是随机排列的，因此我想按照从101开始的顺序进行布置。
为此，我将使用sort方法。

在`loadUserTypes`方法中添加`sort`方法。

    async loadUserTypes () {
      const user = await this.$graphql(listUserTypes, {
        limit: 12
      })

      const result = user.data.listUserTypes.items
      result.sort(function (a, b) {
        if (a.number > b.number) {
          return 1
        } else {
          return -1
        }
      })
      this.rooms = result
    }

我們成功按照房間編號的順序進行了排列！