graphql与react的相遇
秋山客行
- graphql与react的相遇
- 开始代码
- no.1
- no.2
- 总结
graphql与react的相遇
还记得我在thegraph发布了一个子图,我一直在想怎么从这个子图取出数据。由于本人太菜,想了很多方式。首先,我考虑了这个子图的工作机制,它使用的是graphql查询语言。(这里就不讲thegraph了,官网的讲解,大佬的认知比我深入到位。)然后呢,我就去看这个graphql,一种用于API的查询语言。又遇到了一个问题,API,熟悉又陌生的词汇啊。
API:是一些预先定义的接口(如函数、HTTP接口),或指软件系统不同组成部分衔接的约定。 用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程,而又无需访问源码,或理解内部工作机制的细节。
看了一些资料,API有点感觉了。
我现在就是有了一个graphql的接口,我怎么从这个接口取出数据呢?
问题变得明朗了。就此我得出了几个方案,我可以使用axios,使用react(这是目前我会的不多的中的一个)。
开始代码
no.1
npm init了一个项目,npm start axios,新建了一个js文件,开始写代码。
const axios = require('axios')
axios.post('https:api.thegraph.com/subgraphs/name/sameepsi/quickswap03', {query: `query{mints(orderBy: timestamp, orderDirection: desc, where: { to: '0x662546dcc9f158a9abb4d1c3b369b07bc67969d6' }) {idtransaction {idtimestamp__typename}pair {idtoken0 {idsymbol__typename}token1 {idsymbol__typename}__typename}toliquidityamount0amount1amountUSD__typename}}`
})
.then((res) => {console.log(res.data)
})
.catch((error) => {console.error(error)
})
关于axios的具体使用,可以查阅资料,我计划后面有空了,整理一下。这个方案按理是可以的,但是请求参数不对,我查了一下请求参数,我少了一些参数。但我这个菜鸟,貌似也不知道怎么办了。
no.2
create-react-app view_app,然后npm install @apollo/client,或者npm install react-apollo。
用的是apollo,里面有很多子包,有专门支持react的react-apollo,@apollo/client也非常的简单好用。两种代码虽有少许差别,但是也差不多。
我两种都试了一下,这里就记录一下@apollo/client。
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache
} from '@apollo/client' const client = new ApolloClient({cache: new InMemoryCache(),link: new HttpLink({uri: 'https://api.thegraph.com/subgraphs/name/sameepsi/quickswap03',})
})ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>document.getElementById('root'))
App.js:
import React from 'react'
import { useQuery, gql ,NetworkStatus } from '@apollo/client'const GET_Transaction = gql`query transactions($user: Bytes!) {在这里插入代码片swaps(orderBy: timestamp, orderDirection: desc, where: { to: $user }) {idtransaction {idtimestamp__typename}pair {token0 {symbol__typename}token1 {symbol__typename}__typename}amount0Inamount0Outamount1Inamount1OutamountUSDto__typename}
}function App() {const { loading, error, data, refetch, networkStatus } = useQuery(GET_Transaction, {variables: { user: "0x662546dcc9f158a9abb4d1c3b369b07bc67969d6"},})if (networkStatus === NetworkStatus.refetch) return <div>refetch loading</div>if (loading) return <div>loding</div>if (error) return <div>something error</div>return (<div className="App">{data.transactions}<button onClick={() => refetch()}>click me torefetch</button></div>)
}
export default App
apollo的详细使用,我后面再继续学习。现在我已经成功取出我要的数据了。接下来就是如何在页面优美得展现出来。
graphql正深入的知识,也有待提高。
总结
菜鸟起步,困难险阻,多如乱步。菜鸟加油,哪位大佬路过,看到了我言语中的错误,敬请指正。
graphql与react的相遇相关推荐
- [译] Elixir、Phoenix、Absinthe、GraphQL、React 和 Apollo:一次近乎疯狂的深度实践 —— 第一部分...
原文地址:Elixir, Phoenix, Absinthe, GraphQL, React, and Apollo: an absurdly deep dive - Part 1 原文作者:Zach ...
- [译] Elixir、Phoenix、Absinthe、GraphQL、React 和 Apollo:一次近乎疯狂的深度实践 —— 第二部分(测试相关部分)...
原文地址:Elixir, Phoenix, Absinthe, GraphQL, React, and Apollo: an absurdly deep dive - Part 2 原文作者:Zach ...
- 使用GraphQL,React Native和AWS AppSync编写应用程序代码:该应用程序
您将要创造的 在这些教程中,我将向您展示如何使用AWS AppSync和React Native创建GraphQL数据库并与之交互. 该应用程序将具有实时和脱机功能,我们通过AppSync开箱即用. ...
- 使用GraphQL,React Native和AWS AppSync编写应用程序代码:后端
您将要创造的 在这些教程中,我将向您展示如何使用AWS AppSync和React Native创建GraphQL数据库并与之交互. 该应用程序将具有实时和脱机功能,我们通过AppSync开箱即用. ...
- react 错误边界_React with GraphQL和错误边界中的自定义错误页面
react 错误边界 by Abi Noda 通过Abi Noda React with GraphQL和错误边界中的自定义错误页面 (Custom error pages in React with ...
- graphql是什么_为什么GraphQL是避免技术债务的关键
graphql是什么 GraphQL (not to be confused with GraphDB or Open Graph or even an actual graph) is a rema ...
- GraphQL and Relay 浅析
Facebook 在去年夏天公布了 GraphQL,就像往前端深潭砸下了一颗巨石,人们都被水声吸引到了湖边,观望是否会出现什么,有些人期待,有些人猜疑.过了半年多,社区已经慢慢的摸清这个石头的材质,本 ...
- 在疯狂的前端世界,为什么选择学习React
题图 | https://github.com/react-icons/react-icons React Native 和 Prettier的作者之一.前端大牛.Twitter大V @Vjeux(C ...
- 2017年 JavaScript 框架回顾 -- React生态系统
前一篇文章中,我们介绍了2017年 JavaScript 框架的整体情况.我们也了解到在众多的前端框架中,目前最为庞大又在快速增长的当属 React 了,本文就来重点介绍 React 的生态系统. 首 ...
最新文章
- ThinkPHP3.1快速入门(6)路由
- Linux 查找指定文件并删除
- java解析ajax的数据_java ajax 请求后获取 json 数据 以及 使用 解析 ,解惑
- (一)MySQL 基础配置
- WebX RPC说明
- Virtual Breadboard 4.46 arduino模拟仿真虚拟 破解下载
- 2021年社工必备查询网址汇总
- 软件测试基础理论知识点
- BDD - 介绍 Behavior-Driven Development 行为驱动开发
- listlength函数头文件_length函数
- 栈帧 stack frame
- Python读取CSV文件,并进行数据可视化绘图
- 如何挑选高质量的数据中心?
- 电源管理允许此设备唤醒计算机怎么关掉,允许计算机关闭此设备以节省电量灰色 | MOS86...
- Google推出拼音输入法了!
- ASP中Err.number返回的错误代码解释大全
- mysql中的汉字怎么转换_Mysql中文汉字转拼音的实现(每个汉字转换全拼)
- 超级账本Hyperledger-Fabric本地编译与安装(来源于区块链-原理、设计与应用)
- 选择恐惧症的福音之轮盘小程序展示
- CNN FPGA加速器实现(小型)CNN FPGA加速器实现(小型)
热门文章
- the import java.sql cannot be resolved_the import XXXX cannot be resolved 解决方法
- 允许计算机关闭此设备 蓝牙,大师为你解决win7系统配置蓝牙时“允许Bluetooth设备连接到此计算机”选项灰色的修复步骤...
- 在Android Studio中运行Java程序
- 2021上半年中小学教资考试教育知识与能力试题(中学)——主观题
- sql计算除法保留小数
- 在mac系统中读写windows NTFS格式移动硬盘
- RMI以及JMS精品教学视频下载 java
- MySql存储引擎的种类和区别
- Linux文本处理—egrep命令
- android 卡片机,效果堪比卡片机 各品牌超强拍照手机推荐