React，Apollo和express结合使用

在React中使用graphql和express

新建一个react项目，依次安装apollo/client,graphql,graphql-tag

npm i @apollo/client graphql graphql-tag

【注意】： 一定要注意apollo的版本和react的版本要对应，否则后面用起来会报错，会很难受。
下面依次来做一下增删改查四种操作

查询

查询使用的是useQuery（）和useLazyQuery（）

• useQuery: useQuery接受一个graphql类型的代码片段，返回该接口执行的状态，数据以及其他信息等。在页面初始化时只调用一次
• useLazyQuery: 用法和useLazyQuery相同，但是需要人为触发去调用
  以下是代码示例，带参的使用useLazyQuery,不带参的使用useQuery：

  不带参数的查询

//不带参数的

import { useQuery, gql } from '@apollo/client';
function App (){
    return <div>
        APP
        <DisplayLocations></DisplayLocations>
    </div>
}
const GET_LOCATIONS = gql`
  query {
    getList {
       na
       age,
       id
    }
  }
`;
function DisplayLocations() {
    const { loading, error, data } = useQuery(GET_LOCATIONS);

    if (loading) return <p>Loading...</p>; //加载中的组件
    if (error) return <p>Error : {error.message}</p>; // 报错的组件
    console.log({data})
    return <div> {
        data.getList.map(item => <div key={item.id}>
            <p>{item.id}</p>
            <span>{item.name}</span>---<span>{item.age}</span>
        </div>)
    } </div>
}
export default App

当初始化时，useQuery会执行一次，返回数据。

带参数的查询

import { useQuery,useLazyQuery, gql } from '@apollo/client';
import {useState} from "react";
function App (){
    return <div>
        APP
        <DisplayLocations></DisplayLocations>
    </div>
}
const Get_Data = gql`
  query getList($id: String) {
    getList (id: $id){
       name,
       age,
       id
    }
  }
`;
function DisplayLocations() {
    const[inputVal,setInputVal] = useState('64cbcc1e408fc1046b44bb6c')
    let [getList, {loading,data,error}] = useLazyQuery(Get_Data)

    if (loading) return <p>Loading...</p>; //加载中的组件
    if (error) return <p>Error : {error.message}</p>; // 报错的组件
    console.log({data})
    return <div>
        <input type="text" onChange={(event)=>{
            setInputVal(event.target.value)
            getList({ variables: { id: event.target.value} })
        }}></input>
        {
            data&&data.getList.map(item => <div key={item.id}>
            <p>{item.id}</p>
            <span>{item.name}</span>---<span>{item.age}</span>
        </div>
            )
    } </div>
}
export default App

以上组件会在input的change事件触发时执行查询，另： graphql的执行语句千万不要写错。

新增、修改、删除

此时我们用的hooks是useMutation，需要传参

//新增

import { useMutation,useLazyQuery, gql } from '@apollo/client';
import {useState} from "react";
function App (){
    return <div>
        APP
        <DisplayLocations></DisplayLocations>
    </div>
}
const Mutations_Data = gql`
  mutation createPerson($input: TempInput) {
      createPerson(input: $input){
         name,
         age,
         id
   }
  }
`;
function DisplayLocations() {
    let [createData, {data}] = useMutation(Mutations_Data)
    return <div>
        <button onClick={() => {
            createData({variables:{
                input:{
                    name: '李白',
                    age:12
                }
                }})
        }}>AddData</button>
       </div>
}
export default App

修改

import { useMutation,useLazyQuery, gql } from '@apollo/client';
import {useState} from "react";
function App (){
    return <div>
        APP
        <DisplayLocations></DisplayLocations>
    </div>
}
const Mutations_Data = gql`
  mutation updatePerson($id:String!,$input:TempInput) {
      updatePerson(id: $id, input: $input){
         name,
         age,
         id
   }
  }
`;
function DisplayLocations() {
    let [updateData, {data}] = useMutation(Mutations_Data)
    return <div>
        <button onClick={() => {
            updateData({variables:{
                    id:'64cbcc1e408fc1046b44bb6c',
                    input:{
                        name: '牡丹',
                        age:12
                    }
                }})
        }}>UpdateData</button>
    </div>
}
export default App

删除

import { useMutation,useLazyQuery, gql } from '@apollo/client';
import {useState} from "react";
function App (){
    return <div>
        APP
        <DisplayLocations></DisplayLocations>
    </div>
}
const Mutations_Data = gql`
  mutation deletePerson($id:String!) {
      deletePerson(id: $id)
  }
`;
function DisplayLocations() {
    let [deleteData, {data}] = useMutation(Mutations_Data)
    return <div>
        <button onClick={() => {
            deleteData({variables:{id:'64cbcc1e408fc1046b44bb6c'}})
        }}>DeleteData</button>
    </div>
}
export default App

需要注意的是： graphql语句千万不要写错，少一个！都会报错，一定要和后端写的一模一样。