在react vue中使用graphql接口/type-graphql接口

Vue 同时被 3 个专栏收录
3 篇文章 0 订阅
11 篇文章 1 订阅
22 篇文章 0 订阅

在react vue中使用graphql接口/type-graphql接口

后台代码实现:Type-GraphQL结合装饰器写法的node框架的学习笔记

提示:1为vue中使用graphql的操作,2为react中使用graphql的操作

1.在vue中使用graphql

安装脚手架 vue create test =>选中typescript支持
1.1 安装依赖,依赖有点多,有七个
yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag -S
分别是vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
1.2在src目录下创建一个vueApollo.ts文件,引入
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
1.3然后创建http连接(当设置了代理,可以省略前面的http://…)
//使用graphql
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
//1.创建http连接
const httpLink = new HttpLink({
  //设置请求的一些配置,(后台已经跨域)
  uri: 'http://localhost:5000/graphql',
  headers:{//配置Authorization:token
    Authorization:'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkNWNmOTkyNDE1MmJiZTIzN2E2ZWVlMiIsImVtYWlsIjoiMjI3ODc2NTEwNUBxcS5jb20iLCJpYXQiOjE1NjY2MTU0NDEsImV4cCI6MTU2NjYyMjY0MX0.peV9GYLt01NC0Q7eYN3s4DUVKQh1xJaFqbAvk'
  }
})
1.4创建客户端实例
const apolloClient = new ApolloClient({
  link: httpLink,//http 连接
  cache: new InMemoryCache(),//缓存
  connectToDevTools: true,//连接调试工具
})
1.5实例化VueApollo对象,并抛出
export default new VueApollo({
  defaultClient: apolloClient,//默认客户端就是创建的客户端
})
1.6在main.ts中引入并使用
import App from './App.vue';
//引入apolloProvider实例
import apolloProvider from './vueApollo';
//注册插件
import VueApollo from 'vue-apollo';
Vue.use(VueApollo);

Vue.config.productionTip = false
new Vue({
  provide: apolloProvider.provide(),//添加为根组件
  render: h => h(App)
}).$mount('#app')
搭建完毕,在vue的this上就有this.$provide了
1.7使用this.$provide提供的API发送查询请求,在About组件中加入以下代码
import gql from “graphql-tag”; //引入定义graphql的定义解构
<script lang="ts">
import gql from "graphql-tag";
import { Vue, Component } from "vue-property-decorator";

@Component
export default class About extends Vue {
    public query = gql`
           query($id:ID,$seachName:String){
              seachUsers(_id:$id,seachName:$seachName){
                _id,
                name,
                times,
                phone,
                email
              }
           }
        `;
    created() {
        (this as any).$apollo.query({
            query: this.query,
            variables: {
              seachName:'m',
              id:"5d5cf9924152bbe237a6eee2"
            }
        }).then((res:any)=>{
          console.log(res.data);
        }).catch((error:any)=>{
          console.log(error);
        });
    }
}
</script>
query:定义查询语句,通过graphql-tag库来定义,两个返引号 ,里面写graphql的query语句
variables:传递给定义查询语句的参数例如:$id,$seachName
(this as any).$apollo.query({}):定义查询,接收一个对象,里面需要query、variables(可选,当不用传递参数时可以不用)
最后结果返回一个promise对象,.then就是成功,catch就是失败
查询结果:

在这里插入图片描述

1.8 mutation操作,增加操作
创建Home.vue
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import gql from "graphql-tag";
@Component
export default class Home extends Vue {
    public mutation = gql`
        mutation($user: AddUserInput!) {
            addUser(user: $user) {
                _id
                name
                password
            }
        }
    `;
    public user = {
        times: Date.now(),
        name: "xxx",
        password: "123456",
        phone: "13444422554",
        email: "227876333@qq.com"
    };
    created() {
        (this as any).$apollo
            .mutate({
                //mutate请求,相当于post请求
                mutation: this.mutation,
                // 参数列表
                variables: {
                    user: this.user
                }
            })
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.log(error);
            });
    }
}
</script>
(this as any).$apollo.mutate({}):除了查询之外的增删改操作都使用mutate,接收mutation,variables两个对象,variables一样是可选的
AddUserInput:是后台自定义的一个对象类型,里面有上面五个参数
运行结果:

在这里插入图片描述

2.在React中使用graphql的API接口

(下面的3直接使用高阶组件和组件包裹的方式,更像redux的方式,需要的话可以直接下拉到下面)
2.1 老套路,安装脚手架,相关依赖,四个依赖,比vue中使用较少
create-react-app test --typescript 
yarn add react-apollo apollo-boost graphql graphql-tag --save
2.2配置react-apollo,引入组件,配置http请求,在index.tsx中配置
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
//1.引入组件包裹整个App
import { ApolloProvider } from "react-apollo";
//2.引入客户端
import ApolloClient from "apollo-boost";
//3.创建客户端
const client = new ApolloClient({
  uri: "http://localhost:5000/graphql",
  headers:{//设置响应头
    Authorization:'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkNWNmOTkyNDE1MmJiZTIzN2E2ZWVlMiIsImVtYWlsIjoiMjI3ODc2NTEwNUBxcS5jb20iLCJpYXQiOjE1NjY2MTU0NDEsImV4cCI6MTU2NjYyMjY0MX0.peV9GYLt01NC0Q7eYN3s4DUYccgv2VKQh1xJaFqbAvk'
  }
});

ReactDOM.render(
    // 4.包裹整个APP,传入创建好的客户端连接
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

serviceWorker.unregister();
2.3使用query查询(修改App.tsx文件)
import React from 'react';
import './App.css';
//1.引入依赖
import gql from "graphql-tag";
import { Query, QueryResult } from "react-apollo";
//2.创建查询语句
const query = gql`
    query($id:ID,$seachName:String){
      seachUsers(_id:$id,seachName:$seachName){
          _id,
          name,
          times,
          phone,
          email
      }
}
`;
const App: React.FC = () => {
  return (
    <Query query={query} variables={{ seachName: 'm', id: "5d5cf9924152bbe237a6eee2" }}>
      {
        ({ loading, error, data }: QueryResult<any, Record<string, any>>): JSX.Element | null => {
            console.log('loading',loading);
            console.log('data',data);
            console.log('error',error);
          return (
            <>

            </>
          );
        }
      }
    </Query>
  );
}

export default App;

gql 用来定义增删改查的graphql语句
Query组件,包裹后传入需要查询的query参数和variables可选参数
variables:当不需要传递参数的情况下,可以不使用
传递一个回调函数,用来接收返回的值,参数类型是QueryResult泛型接口类型,里面有loading,error,data三个属性
loading:表示是否还在加载中,false则表示加载完毕,也就是请求返回完毕
error:表示当请求发生错误的时候返回的数据
data:表示请求成功后返回的数据
成功结果:

在这里插入图片描述

2.4mutation增删改中的增加操作
创建一个组件,Test.tsx,代码如下:
import React from 'react';
import './App.css';
//1.引入依赖
import gql from "graphql-tag";
import { Mutation, MutationResult } from "react-apollo";
//2.创建查询语句
const mutation = gql`
     mutation($user: AddUserInput!) {
            addUser(user: $user) {
                _id
                name
                password
            }
        }
`;
const user = {
    times: Date.now(),
    name: "xxx",
    password: "123456",
    phone: "13444422554",
    email: "227876333@qq.com"
};
const Test: React.FC = () => {
    return (
        <Mutation mutation={mutation} variables={{ user }}>
            {
                (createUser: any, { data, error, loading }: MutationResult<any>): JSX.Element | null => {
                    console.log('loading', loading);
                    console.log('data', data);
                    console.log('error', error);
                    const clickAddUser = () => {
                        createUser();//调用第一个参数,传递参数创建
                    }
                    return (
                        <>
                            <button onClick={clickAddUser}> 点击创建 </button>
                        </>
                    );
                }
            }
        </Mutation>
    );
}

export default Test;
Mutation:组件,包裹后,传递mutation和variables参数,并且在里面使用回调函数
当触发第一个参数createUser方法的时候,发送请求到后台,创建,同时第二个参数发生改变,重新渲染数据
第二个参数和查询的返回的一致,一样有error,loading和data,只是类型有所不一样
成功结果

在这里插入图片描述

点击创建后:

在这里插入图片描述

点击button,触发创建成功

失败的情况下一样error有值并打印出来,而不是undefined

3. React中使用graphql的另外一种方式

3.1 安装依赖
yarn add apollo-client apollo-cache-inmemory apollo-link-http react-apollo graphql-tag
3.2创建一个graphql.ts
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
//3.创建客户端
const httpLink = new HttpLink({
    uri: "http://localhost:5000/graphql",
    headers: {//设置响应头
        Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkNWNmOTkyNDE1MmJiZTIzN2E2ZWVImVtYWlsIjoiMjI3ODc2NTEwNUBxcS5jb20iLCJpYXQiOjE1NjY2MjI2OTEsImV4cCI6MTU2OTg5MX0.30y7lHz0UmBQ2pNTvGywjrCSm1-WSAFDHh0mmh5ju6s'
    }
});
// 使用缓存 并注入httpLink
export const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
});

3.3 使用ApolloProvider包裹整个组件,传递client等于注册的graphql的client
// 使用graphqlql的客户端链接函数
import { ApolloProvider } from "react-apollo";
import { client } from './graphql';
ReactDOM.render(
    // 4.包裹整个APP,传入创建好的客户端连接
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>,
    document.getElementById("root")
);

3.4 这时候就使用react-apollo库暴露出来的graphql高阶组件,传递对应的两个参数
这时候的App.tsx改成如下
import React from 'react';
import './App.css';
//1.引入依赖
import gql from "graphql-tag";
import { graphql } from 'react-apollo'
// import { Query, QueryResult } from "react-apollo";
//2.创建查询语句
const query = gql`
    query($id:ID,$seachName:String){
      seachUsers(_id:$id,seachName:$seachName){
          _id,
          name,
          times,
          phone,
          email
      }
}
`;
interface PropsType {
  data: any
}
const App: React.FC<PropsType> = ({ data }) => {
  // 这时候,会把graphql请求到的数据存储到props的data中
  console.log(data);
  return (
    <h2>请求成功</h2>
    // <Query query={query} variables={{ seachName: 'm', id: "5d5cf9924152bbe237a6eee2" }}>
    //   {
    //     ({ loading, error, data }: QueryResult<any, Record<string, any>>): JSX.Element | null => {
    //         console.log('loading',loading);
    //         console.log('data',data);
    //         console.log('error',error);
    //       return (
    //         <>
    //         </>
    //       );
    //     }
    //   }
    // </Query>
  );
}

export default graphql(query, {
  options: (props) => ({
    // variables: { seachName: 'm', id: "5d5cf9924152bbe237a6eee2" }
  })
})(App as any);
graphql高阶组件会把获取的结果给props的data对象中

graphql第一个参数就是需要做的操作,query或者mutation 第二个参数是一个对象,正常在查询中,如果需要传递一些参数的话,可以通过里面的options方法返回一个对象,其中包含了variables这个传递的参数

这样的使用方式更为简介,结果也是相同的
3.5 相同,Test.tsx文件如下
import React, { useEffect } from 'react';
import './App.css';
//1.引入依赖
import gql from "graphql-tag";
import { graphql } from 'react-apollo';
// import { Mutation, MutationResult } from "react-apollo";
//2.创建查询语句
const mutation = gql`
     mutation($user: AddUserInput!) {
            addUser(user: $user) {
                _id
                name
                password
            }
        }
`;
const user = {
    times: Date.now(),
    name: "xxx",
    password: "123456",
    phone: "13444422554",
    email: "227876333@qq.com"
};
interface PropsType {
    addUser: (data: any) => any;
    data:any;
}
// 方式1 添加
const Test: React.FC<PropsType> = ({ addUser,data }) => {
    console.log(data);
    useEffect(() => {
        addUser({ variables: user })
    }, []);
    // 这时候,会把graphql请求到的数据存储到props的data中,如果是增删改的话,则注入对应的addUser等,参数则是$user: AddUserInput!这个参数
    return (
        <h2>111</h2>
        // <Mutation mutation={mutation} variables={{ user }}>
        //     {
        //         (createUser: any, { data, error, loading }: MutationResult<any>): JSX.Element | null => {
        //             console.log('loading', loading);
        //             console.log('data', data);
        //             console.log('error', error);
        //             const clickAddUser = () => {
        //                 createUser();//调用第一个参数,传递参数创建
        //             }
        //             return (
        //                 <>
        //                     <button onClick={clickAddUser}> 点击创建 </button>
        //                 </>
        //             );
        //         }
        //     }
        // </Mutation>
    );
}
// 方式2 添加
export default graphql(mutation, {
    options: (props) => ({
        variables: {
            user
        },
        optimisticResponse:{ // 表示在对应的每个请求方法的传递参数

        }
    })
})(Test as any);

唯一区别是,mutation暴露了其中的addUser添加成为一个函数,接收对象参数,这时候我们需要传递一个{ variables: user }给addUser函数执行,然后props中的data就会获得对应的数据

在react和vue中的简单使用就这样,variables是在有定义$id等参数的情况下使用,没有的话可以不使用
需要观看graphql入门或者type-graphql的博客等可以点击我,查看其它博客
  • 0
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值