关于采用GraphQL的考虑

2 年 ago
科, 颖
4 minutes

首先

由于我一直对GraphQL技术进行调查，所以我决定在以后的新项目中考虑是否采用它。以下总结了与REST API相比，GraphQL的优点和使用方法。

验证环境

    • OS: macOS

 

    • python 3.9

 

    • Web Framework: FastAPI

 

    Front: React.js & Material UI

GraphQL是什么

GraphQL是一种用于API的查询语言
尽管与Facebook开发的开源REST API相同，都是向特定终点发送请求并接收响应的机制，但以下几点是不同的。

・REST API
通過使用GET、POST、PATCH等HTTP方法的不同，對於相同的端點執行數據獲取、註冊、更新等處理。
此外，對於與以下用戶信息相關的資源，路徑被設置為/user，但如果要訪問購物車數據，則會增加類似於/cart的端點。

curl -x GET http://localhost:3000/user/{id} （ユーザー情報取得）
curl -x POST -d '{ "uesr_name": "yamada", "first_anme": "Hanako", "last_name": "Yamada"} http://localhost:3000/user （ユーザー登録） 
curl -x PATCH -d '{ id:3, "last_name": "Tanaka"} http://localhost:3000/user （ユーザー情報更新）
Screen Shot 2021-02-25 at 10.15.17.png
Endpoint: http://localhost:3000/graphql
# Full filed
query {
  getUser(id: 1) {
    id
    userName
    firstName
    lastName
  }
}

query {
  getUser(id: 1) {
    userName
    firstName
    lastName
  }
}


# Create & update
mutation createUser {
  createUser(newUser: {
    userName: "h-tanaka",
    firstName: "hanako",
    lastName: "Tanaka",
  })
  {
    id
    userName
        firstName
    lastName
  }
}
Screen Shot 2021-02-25 at 10.58.06.png

试着在 FastAPI 中实际操作一下

省略安装到编码的步骤
关于上述，请参考本文。
真的可以开发安全的GraphQL API吗？通过FastAPI+GraphQL+测试可以进行安全的API开发。


from fastapi import FastAPI
import graphene
from starlette.graphql import GraphQLApp
from .graph import schema
from .routers import user

app = FastAPI()

app.add_route('/graphql', GraphQLApp(schema=graphene.Schema(query=schema.Query, mutation=schema.Mutation)))

app.include_router(user.router)


import graphene
from .serializers import UserInfoModel, UserModel, UserCreateModel

class Query(graphene.ObjectType):
    get_user = graphene.Field(graphene.List(UserInfoModel), id=graphene.NonNull(graphene.Int))

    @staticmethod
    def resolve_get_user(parent, info, id):
        return[
            UserModel(
                id=1,
                user_name='t-yamada',
                first_name='taro',
                last_name='yamada'
            )
        ]


class CreateUser(graphene.Mutation):
    class Arguments:
        new_user = UserCreateModel()

    Output = UserInfoModel

    @staticmethod
    def mutate(parent, info, new_user):
        print(new_user)

        return UserModel(
                id=1,
                user_name='k-yamada',
                first_name='kenji',
                last_name='yamada'
            )

class Mutation(graphene.ObjectType):
    create_user = CreateUser.Field()

from typing import List, Optional
from graphene_pydantic import PydanticInputObjectType, PydanticObjectType
from pydantic import BaseModel

class UserModel(BaseModel):
    id: Optional[int]
    user_name: str
    first_name: str
    last_name: str

class UserInfoModel(PydanticObjectType):
    class Meta:
        model = UserModel


class UserCreateModel(PydanticInputObjectType):
    class Meta:
        model = UserModel
        exclude_fields = ('id', )

试试看

    1. 在管理界面中，如果要显示多个图表，使用REST必须发送多个请求到多个终端点，而使用GraphQL则可以在一个请求中获取所有数据。

由于REST的响应字段是固定的，因此在创建通用的表格组件，如React中，可能需要进行数据截取处理。而使用GraphQL，则可以只获取所需的字段，这样前端实现会更加轻松。

query {
  getUser(id: 1) {
    id
    userName
    firstName
    lastName
  }
}
// idを含めたくない場合のQuery
query {
  getUser(id: 1) {
    userName
    firstName
    lastName
  }
}
    汎用的なテーブルコンポーネント
import React from 'react'
import Table, { Size } from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableCell from '@material-ui/core/TableCell'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'
import Button from '@material-ui/core/Button'
import EditIcon from '@material-ui/icons/Edit'
import styled from 'styled-components'
import { Rows, Row, RowValue, Headers } from '~/types'

type Props = {
  headers: Headers
  editable?: boolean
  size?: Size
  rows: Rows
  onClick?: (key?: number) => void
}

function mapRows(rows: Rows, headers: Headers): Rows {
  const columns = []
  for (const header of headers) {
    columns.push(header.accessor)
  }
  const newRows = rows.map((row) => {
    const newHash: Row = { key: null, value: null }
    const newValue: RowValue = {}
    for (const key of columns) {
      newValue[key] = row.value[key]
    }
    newHash['value'] = newValue
    newHash['key'] = row.key
    return newHash
  })
  return newRows
}

const DataGridView: React.FC<Props> = (props) => {
  const size = props.size || 'small'
  const isEditable = props.editable || false
  const newRows = mapRows(props.rows, props.headers)
  return (
    <React.Fragment>
      <DataTable stickyHeader aria-label="sticky table" size={size}>
        <TableHead>
          <TableRow>
            {props.headers.map((value) => (
              <TableCell key={value.accessor}>{value.header}</TableCell>
            ))}
            {isEditable && <TableCell />}
          </TableRow>
        </TableHead>
        <TableBody>
          {newRows.map((row) => (
            <TableRow key={row.key}>
              {Object.keys(row.value).map((key) => (
                <TableCell key={key}>{row.value[key]}</TableCell>
              ))}
              <TableCell>
                {isEditable && (
                  <Button
                    size="small"
                    color="primary"
                    onClick={() => props.onClick(row.key)}
                  >
                    <EditIcon fontSize="small" />
                  </Button>
                )}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </DataTable>
    </React.Fragment>
  )
}

const DataTable = styled(Table)`
  min-width: 750px;
  .MuiTableCell-stickyHeader {
    background: #f3f3f3;
  }
`

export default DataGridView

调查

尽管仍需要进行关于查询以外的调查等，但是如果在React等上创建前端时使用SWR等支持GraphQL的工具，也可以同时使用Rest API和GraphQL，在特定页面上逐渐采用GraphQL并深入了解这一知识，这也是一个不错的选择。根据应用的服务而定，如果是内部系统等，相对容易采用。

这次写得相对轻松，但希望将来在获得更多见解的阶段能够更新文章。

✖
广告
将在 10 秒后关闭
bannerAds