5 मिनट
एक एप्लिकेशन से क्वेरी करना
अपने application से The Graph को क्वेरी करना सीखें।
GraphQL एंडपॉइंट प्राप्त करना
विकास प्रक्रिया के दौरान, आपको दो अलग-अलग चरणों में एक GraphQL API endpoint प्राप्त होगा: एक परीक्षण के लिए सबग्राफ Studio में, और दूसरा उत्पादन में The Graph Network से क्वेरी करने के लिए।
सबग्राफ Studio Endpoint
अपने Subgraph को Subgraph Studio पर deploy करने के बाद, आपको एक endpoint मिलेगा जो इस प्रकार दिखेगा: (https://api.thegraph.com/subgraphs/name/YOUR_SUBGRAPH_NAME)
1https://api.studio.thegraph.com/query/<ID>/<SUBGRAPH_NAME>/<VERSION>
यह एंडपॉइंट केवल परीक्षण उद्देश्यों के लिए है और इसकी अनुरोध सीमा निर्धारित है।
The Graph Network एंडपॉइंट
अपने Subgraph को नेटवर्क पर publish करने के बाद, आपको एक endpoint मिलेगा जो इस प्रकार दिखेगा:
1https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>
यह endpoint नेटवर्क पर सक्रिय उपयोग के लिए बनाया गया है। यह आपको विभिन्न GraphQL client libraries का उपयोग करके Subgraph से query करने और अपनी application को indexed data से भरने की अनुमति देता है।
लोकप्रिय GraphQL क्लाइंट्स का उपयोग
Graph Client
The Graph अपना खुद का GraphQL क्लाइंट, graph-client प्रदान कर रहा है, जो अद्वितीय विशेषताओं का समर्थन करता है, जैसे:
- Cross-chain Subgraph Handling: एक ही query में multiple Subgraphs से data प्राप्त करना
- स्वचालित ब्लॉक ट्रैकिंग
- स्वचालित Pagination
- पूरी तरह से टाइप किया गया परिणाम
नोट: graph-client
अन्य लोकप्रिय GraphQL क्लाइंट जैसे Apollo और URQL के साथ एकीकृत है, जो React, Angular, Node.js और React Native जैसे परिवेशों के अनुकूल हैं। परिणामस्वरूप, graph-client
का उपयोग करने से The Graph के साथ काम करने के लिए आपको एक उन्नत अनुभव मिलेगा।
Graph Client के साथ डेटा प्राप्त करें
आइए देखें कि graph-client
का उपयोग करके Subgraph से डेटा कैसे प्राप्त किया जाता है:
स्टेप 1
अपने प्रोजेक्ट में The Graph Client CLI इंस्टॉल करें:
1yarn add -D @graphprotocol/client-cli2# or, with NPM:3npm install --save-dev @graphprotocol/client-cli
चरण 2
अपनी क्वेरी को एक .graphql
फ़ाइल में परिभाषित करें (या अपने .js
या .ts
फ़ाइल में इनलाइन करें):
1query ExampleQuery {2 # this one is coming from compound-v23 markets(first: 7) {4 borrowRate5 cash6 collateralFactor7 }8 # this one is coming from uniswap-v29 pair(id: "0x00004ee988665cdda9a1080d5792cecd16dc1220") {10 id11 token0 {12 id13 symbol14 name15 }16 token1 {17 id18 symbol19 name20 }21 }22}
चरण 3
एक कॉन्फ़िगरेशन फ़ाइल (जिसका नाम .graphclientrc.yml
हो) बनाएं और इसे आपके GraphQL endpointकी ओर इंगित करें, जो The Graph द्वारा प्रदान किए गए हैं, उदाहरण के लिए:
1# .graphclientrc.yml2sources:3 - name: uniswapv24 handler:5 graphql:6 endpoint: https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>7 - name: compoundv28 handler:9 graphql:10 endpoint: https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>1112documents:13 - ./src/example-query.graphql
स्टेप 4
निम्नलिखित The Graph Client CLI कमांड चलाएँ ताकि टाइप किए गए और उपयोग के लिए तैयार JavaScript कोड उत्पन्न हो सके:-
1graphclient build
स्टेप 5
अपनी .ts
फ़ाइल को उत्पन्न किए गए टाइप किए गए GraphQL दस्तावेज़ों का उपयोग करने के लिए अपडेट करें::
1import React, { useEffect } from 'react'2// ...3// we import types and typed-graphql document from the generated code (`..graphclient/`)4import { ExampleQueryDocument, ExampleQueryQuery, execute } from '../.graphclient'56function App() {7 const [data, setData] = React.useState<ExampleQueryQuery>()89 useEffect(() => {10 execute(ExampleQueryDocument, {}).then((result) => {11 setData(result?.data)12 })13 }, [setData])14 return (15 <div className="App">16 <header className="App-header">17 <img src={logo} className="App-logo" alt="logo" />18 <p>Graph Client Example</p>19 <fieldset>20 {data && (21 <form>22 <label>Data</label>23 <br />24 <textarea value={JSON.stringify(data, null, 2)} readOnly rows={25} />25 </form>26 )}27 </fieldset>28 </header>29 </div>30 )31}3233export default App
महत्वपूर्ण नोट: graph-client अन्य GraphQL क्लाइंट जैसे Apollo client, URQL, या React Query के साथ पूरी तरह से एकीकृत है; आप आधिकारिक रिपॉजिटरी में उदाहरण देख सकते हैं। हालाँकि, यदि आप किसी अन्य क्लाइंट का चयन करते हैं, तो ध्यान रखें कि आप क्रॉस-चेन सबग्राफ Handling या Automatic Pagination का उपयोग नहीं कर पाएंगे, जो The Graph को क्वेरी करने के लिए मुख्य विशेषताएँ हैं।
Apollo Client
Apollo client एक सामान्य GraphQL क्लाइंट है जो फ्रंट-एंड इकोसिस्टम में उपयोग किया जाता है। यह React, Angular, Vue, Ember, iOS और Android के लिए उपलब्ध है।
हालाँकि यह सबसे भारी क्लाइंट है, इसमें कई विशेषताएँ हैं जो GraphQL के ऊपर उन्नत UI बनाने के लिए उपलब्ध हैं:
- उन्नत त्रुटि प्रबंधन
- पृष्ठ पर अंक लगाना
- डेटा प्रीफेचिंग
- आशावादी UI
- लोकल स्टेट प्रबंधन
Apollo Client के साथ डेटा प्राप्त करें
आइए देखें कि Apollo Client का उपयोग करके Subgraph से डेटा कैसे प्राप्त किया जाता है:
स्टेप 1
@apollo/client
और graphql
को इंस्टॉल करें:
1npm install @apollo/client graphql
चरण 2
API से निम्नलिखित कोड के साथ क्वेरी करें:
1import { ApolloClient, InMemoryCache, gql } from '@apollo/client'23const APIURL = 'https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>'45const tokensQuery = `6 query {7 tokens {8 id9 tokenID10 contentURI11 metadataURI12 }13 }14`1516const client = new ApolloClient({17 uri: APIURL,18 cache: new InMemoryCache(),19})2021client22 .query({23 query: gql(tokensQuery),24 })25 .then((data) => console.log('Subgraph data: ', data))26 .catch((err) => {27 console.log('Error fetching data: ', err)28 })
चरण 3
आप वेरिएबल्स का उपयोग करने के लिए, क्वेरी में variables
आर्गुमेंट पास कर सकते हैं:
1const tokensQuery = `2 query($first: Int, $orderBy: BigInt, $orderDirection: String) {3 tokens(4 first: $first, orderBy: $orderBy, orderDirection: $orderDirection5 ) {6 id7 tokenID8 contentURI9 metadataURI10 }11 }12`1314client15 .query({16 query: gql(tokensQuery),17 variables: {18 first: 10,19 orderBy: 'createdAtTimestamp',20 orderDirection: 'desc',21 },22 })23 .then((data) => console.log('Subgraph data: ', data))24 .catch((err) => {25 console.log('Error fetching data: ', err)26 })
URQL अवलोकन
URQL Node.js, React/Preact, Vue और Svelte वातावरण के भीतर उपलब्ध है, जिसमें कुछ अधिक उन्नत सुविधाएँ शामिल हैं: -
- Flexible cache system
- एक्स्टेंसिबल डिज़ाइन (इसके शीर्ष पर नई क्षमताओं को जोड़ना आसान)
- लाइटवेट बंडल (अपोलो क्लाइंट की तुलना में ~ 5x हल्का)
- फ़ाइल अपलोड और ऑफ़लाइन मोड के लिए समर्थन
URQL के साथ डेटा प्राप्त करें
आइए देखें कि URQL का उपयोग करके Subgraph से डेटा कैसे प्राप्त किया जाता है:
स्टेप 1
urql
और graphql
को इंस्टॉल करें:
1npm install urql graphql
चरण 2
API से निम्नलिखित कोड के साथ क्वेरी करें:
1import { createClient } from 'urql'23const APIURL = 'https://gateway.thegraph.com/api/<API_KEY>/subgraphs/id/<SUBGRAPH_ID>'45const tokensQuery = `6 query {7 tokens {8 id9 tokenID10 contentURI11 metadataURI12 }13 }14`1516const client = createClient({17 url: APIURL,18})1920const data = await client.query(tokensQuery).toPromise()