Docs
खोज⌘ K
  • Home
  • The Graph के बारे में
  • समर्थित नेटवर्क
  • Protocol Contracts
  • सबग्राफ
    • सबस्ट्रीम
      • टोकन API
        • AI Suite
          • Overview
          • Indexer टूलिंग
            • GraphTally Guide
            • Supported Network Requirements
            • Chain Integration Process Overview
            • नई श्रृंखला एकीकरण
            • संसाधन
              सबग्राफ > queries

              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()
              ⁠GitHub पर संपादित करें⁠

              Querying Best Practicesवितरित प्रणाली
              इस पृष्ठ पर
              • GraphQL एंडपॉइंट प्राप्त करना
              • सबग्राफ Studio Endpoint
              • The Graph Network एंडपॉइंट
              • लोकप्रिय GraphQL क्लाइंट्स का उपयोग
              • Graph Client
              • Graph Client के साथ डेटा प्राप्त करें
              • Apollo Client
              • Apollo Client के साथ डेटा प्राप्त करें
              • URQL अवलोकन
              • URQL के साथ डेटा प्राप्त करें
              The GraphStatusTestnetBrand AssetsForumSecurityPrivacy PolicyTerms of Service