graphql与react的相遇

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' }) {
      id
      transaction {
        id
        timestamp
        __typename
      }
      pair {
        id
        token0 {
          id
          symbol
          __typename
        }
        token1 {
          id
          symbol
          __typename
        }
        __typename
      }
      to
      liquidity
      amount0
      amount1
      amountUSD
      __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 }) {
    id
    transaction {
      id
      timestamp
      __typename
    }
    pair {
      token0 {
        symbol
        __typename
      }
      token1 {
        symbol
        __typename
      }
      __typename
    }
    amount0In
    amount0Out
    amount1In
    amount1Out
    amountUSD
    to
    __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正深入的知识，也有待提高。

总结

菜鸟起步，困难险阻，多如乱步。菜鸟加油，哪位大佬路过，看到了我言语中的错误，敬请指正。