The meeting of graphql and react

Remember that I posted a subgraph on the graph and I've been thinking about how to get data out of it. Because I cooked too much, I thought about a lot of ways. First, I consider how this subgraph works, using the graphql query language. (I won't talk about the graphs here, the explanations on the website, the big guys know more than I do.) Then, I'll go to this graphql, a query language for API. I've got another problem, API, familiar and unfamiliar vocabulary.
API: A set of predefined interfaces (such as functions, HTTP interfaces), or conventions for the convergence of different components of a software system. Used to provide a set of routines that applications and developers can access based on a piece of software or hardware without having to access the source code or understand the details of internal mechanisms of work.
Looking at some data, the API feels a little bit.
Now that I have a graphql interface, how can I get data out of it?
The problem became clear. I've come up with several scenarios for this, and I can use axios and react (which is one of the few I've seen so far).

Start Code

no.1

npm init has a project, npm start axios, created a new js file, and started writing code.

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)
})

For the specific use of axios, you can refer to the materials, I plan to have some time later to sort them out. This scenario is reasonable, but the request parameters are incorrect. I checked the request parameters and lost some parameters. But I am a newbie and I don't seem to know what to do.

no.2

create-react-app view_app, then npm install @apollo/client, or npm install react-apollo.
It uses apollo, which has many subpackages, react-apollo which specifically supports react, and @apollo/client which is also very simple and useful. The two codes differ slightly, but are similar.
I've tried both, so here's a record of @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!) {Insert a code snippet here
  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

Detailed use of apollo, I will continue to learn later. Now I have successfully retrieved the data I want. The next step is how to show off the beauty of the page.
graphql is in-depth knowledge and needs to be improved.

summary

Newbies start with difficulties and obstacles, like chaos. Newbie come on, which big man passed by and saw my speech error, please correct.