在react vue中使用graphql接口/type-graphql接口
在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: "[email protected]"
};
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: "[email protected]"
};
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>
// >): JSX.Element | null => {
// console.log('loading',loading);
// console.log('data',data);
// console.log('error',error);
// return (
// <>
//
// );
// }
// }
//
);
}
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: "[email protected]"
};
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>
// ): JSX.Element | null => {
// console.log('loading', loading);
// console.log('data', data);
// console.log('error', error);
// const clickAddUser = () => {
// createUser();//调用第一个参数，传递参数创建
// }
// return (
// <>
//
//
// );
// }
// }
//
);
}
// 方式2 添加
export default graphql(mutation, {
options: (props) => ({
variables: {
user
},
optimisticResponse:{ // 表示在对应的每个请求方法的传递参数
}
})
})(Test as any);
唯一区别是，mutation暴露了其中的addUser添加成为一个函数，接收对象参数，这时候我们需要传递一个{ variables: user }给addUser函数执行，然后props中的data就会获得对应的数据