一个使用Nest.js+graphql+React+MongoDB的Crud Demo (前端)

前言

刚刚写完后端的代码刷了下B站,发现有很多小伙伴还是觉得国外火的技术传到国内不一定回火,甚至可能会非常沉寂,我个人感觉,学习新的技术不一定目的性那么强,既然它能在国外大火至少说明它的内核很可能值得我们很多人研究好几个月甚至好几年的,抱着更高一层的思想去学习,很多东西我觉得自然而然会得到的.
你们应该知道是什么东西,手动狗头.

数据检查

React和apollo client,甚至graphql结合的都相当好,毕竟FB,所以我们实现的方式有很多种,目前大多数我们的业务都可以通过官方推荐的 appolo-boost 工具完美解决,我们这篇文章也是采用这个工具,当然如果你对appolo平台比较了解的话,很多人其实是并不会采用这个方式,而是自己去配置的,据说是apollo-boost是有些问题的,但这并不耽误我们使用,那些问题我这样级别的也遇不到.

首先安装:

yarn add apollo-boost @apollo/react-hooks graphql

之后呢,官方推荐我们现在普通的JS文件里看一下数据能不能得到,配合我们上一篇文章做好的后端的话,这里代码如下,我们直接写在 index.js 中.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import ApolloClient, {gql} from 'apollo-boost'

const client = new ApolloClient({uri: 'http://localhost:3001/graphql'})
client
  .query({
    query: gql`
      {
        findall{
          id
          name
        }
      }
    `
  })
  .then(res => console.log(res))

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

当然,如果你没有做API,官方也提供了graphql沙盒让你测试,地址如下:

https://48p1r2roz4.sse.codesandbox.io

你可以直接打开看一下它的数据格式,因为有很好的代码提示,所以这里也不解释了,当然,我们之前做的数据格式更加简单,更推荐大家从后端API做起.

我们在控制台可以得到数据就说明接口和前端工程都没啥问题:

{data: {…}, loading: false, networkStatus: 7, stale: false}
data:
findall: Array(5)
0: {id: "5dbf4b4606e27a391c7f901d", name: "asen", __typename: "CreateCatDto"}
1: {id: "5dbf4b5b06e27a391c7f901e", name: "asdw", __typename: "CreateCatDto"}
2: {id: "5dbf69018f39281460814650", name: "shan", __typename: "CreateCatDto"}
3: {id: "5dbf69c12f8f3c05401f74a4", name: "shan", __typename: "CreateCatDto"}
4: {id: "5dbf69e02f8f3c05401f74a5", name: "23", __typename: "CreateCatDto"}
length: 5
__proto__: Array(0)
__proto__: Object
loading: false
networkStatus: 7
stale: false
__proto__: Object

集成React

其实只要使用Provider配置好了,我们就可以全局使用状态了,react-Apollo提供了hooks写法,使用体验和小程序也有点类似,同时状态管理也不需要我们太过担心.

这里我们新建一个组件,components.js:

import React from 'react'
import {gql} from 'apollo-boost'
import { useQuery } from '@apollo/react-hooks'

const DATA = gql`
  {
    findall {
      id
      name
      age
    }
  }
`

const Comp = () => {
  const {loading, error, data} = useQuery(DATA)
  if (loading) {
    return (<div>loading~~~~</div>)
  }
  if (error) {
    return (<div>ERROR</div>)
  }
  const res = data.findall
  return res.map(({id, name, age}) => (
    <div key={id}>
      <p>{name}:{age}</p>
    </div>
  ))
}

export default Comp

代码其实很好懂,类似于loading-error-data的方式,很多库诸如swr, suspense等用法都见怪不怪了,如果你还不知道loading是什么的话,写出来去刷新一下,别眨眼,你会看到不一样的东西的.

总结

其实就是打通graphql在前后端的使用,其实内容不多,主要是解开这个工具的神秘面纱,也让大家体会到它的方便程度,以及为什么敢号称取代restful.

本文涉及到的只是graphql与react交互的简单使用,很多基本功能其实也没有讲到,更深层次的大家可以去看apollo-react的官方文档.