From e63f7fd28a7b91a950eaa99ccbdeb0e3bebd25a4 Mon Sep 17 00:00:00 2001 From: KiranAkadas Date: Sun, 10 Nov 2019 16:13:25 +0530 Subject: [PATCH 1/9] translated part-five --- docs/tutorial/part-five/index.md | 85 +++++++++++++++++--------------- 1 file changed, 44 insertions(+), 41 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index 8f213ea..83f2692 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -1,20 +1,21 @@ --- -title: Source Plugins +शीर्षक: Source Plugins typora-copy-images-to: ./ disableTableOfContents: true --- -> This tutorial is part of a series about Gatsby’s data layer. Make sure you’ve gone through [part 4](/tutorial/part-four/) before continuing here. +> यह ट्यूटोरियल Gatsby के डेटा लेयर के बारे में एक श्रंखला का हिस्सा है। यहां जारी रखने से पहले सुनिश्चित करें कि आप [भाग 4] (/tutorial/part-four/) से गुजर चुके हैं। -## What's in this tutorial? +## इस ट्यूटोरियल में क्या है? -In this tutorial, you'll be learning about how to pull data into your Gatsby site using GraphQL and source plugins. Before you learn about these plugins, however, you'll want to know how to use something called GraphiQL, a tool that helps you structure your queries correctly. +इस ट्यूटोरियल में, आप GraphQL और स्रोत प्लगइन्स का उपयोग करके अपने Gatsby साइट में डेटा को कैसे खींचना सीख सकते हैं। इससे पहले कि आप इन प्लगइन्स के बारे में जानें, आप यह जानना चाहते हैं कि GraphQL नामक एक चीज़ का उपयोग कैसे किया जाए, जो कि आपके प्रश्नों को सही ढंग से बनाने में मदद करता है। -## Introducing GraphiQL +## परिचय GraphQL -GraphiQL is the GraphQL integrated development environment (IDE). It's a powerful (and all-around awesome) tool you'll use often while building Gatsby websites. +GraphQL, GraphQL एकीकृत विकास वातावरण (आईडीई) है। यह एक शक्तिशाली (और सभी के आसपास भयानक) उपकरण है जिसका उपयोग आप अक्सर Gatsby वेबसाइटों के निर्माण के दौरान करेंगे। -You can access it when your site's development server is running—normally at + +जब आपकी साइट का विकास सर्वर सामान्य रूप से चल रहा हो तो आप इसे एक्सेस कर सकते हैं . -Poke around the built-in `Site` "type" and see what fields are available on it -- including the `siteMetadata` object you queried earlier. Try opening GraphiQL and play with your data! Press Ctrl + Space (or use Shift + Space as an alternate keyboard shortcut) to bring up the autocomplete window and Ctrl + Enter to run the GraphQL query. You'll be using GraphiQL a lot more through the remainder of the tutorial. +अंतर्निहित 'site' "type" के आसपास प्रहार करें और देखें कि उस पर कौन से फ़ील्ड उपलब्ध हैं - जिसमें आप पहले से साइट किए गए `siteMetadata` ऑब्जेक्ट को शामिल करते हैं। GraphiQL खोलने की कोशिश करो और अपने डेटा के साथ खेलते हैं! स्वत: पूर्ण विंडो लाने के लिए Ctrl + Space (या वैकल्पिक कीबोर्ड शॉर्टकट के रूप में Shift + Space का उपयोग करें) और Ctrl + को चलाने के लिए रेखांकन क्वेरी। आप शेष ट्यूटोरियल के माध्यम से बहुत अधिक GraphQL का उपयोग करेंगे। -## Using the GraphiQL Explorer +## GraphiQL एक्सप्लोरर का उपयोग करना -The GraphiQL Explorer enables you to interactively construct full queries by clicking through available fields and inputs without the repetitive process of typing these queries out by hand. +GraphiQL एक्सप्लोरर आपको इन प्रश्नों को हाथ से टाइप करने की दोहराव प्रक्रिया के बिना उपलब्ध फ़ील्ड और इनपुट के माध्यम से क्लिक करके इंटरएक्टिव तरीके से पूर्ण क्वेरी बनाने में सक्षम बनाता है। Ctrl + Enter. This will pre-fill a query for the `id` of each file. Press "Play" to run the query: +`AllFile` ड्रॉपडाउन पर क्लिक करें। क्वेरी क्षेत्र में `allFile 'के बाद अपना कर्सर रखें, और फिर टाइप करें Ctrl + Enter । यह प्रत्येक फ़ाइल के `आईडी` के लिए एक क्वेरी भर देगा। क्वेरी चलाने के लिए "Play" दबाएं: ![filesystem-query](filesystem-query.png) -In the Explorer pane, the `id` field has automatically been selected. Make selections for more fields by checking the field's corresponding checkbox. Press "Play" to run the query again, with the new fields: +एक्सप्लोरर फलक में, `आईडी` फ़ील्ड को स्वचालित रूप से चुना गया है। फ़ील्ड के संबंधित चेकबॉक्स की जाँच करके अधिक फ़ील्ड के लिए चयन करें। नए फ़ील्ड के साथ क्वेरी चलाने के लिए "Play" दबाएं: ![filesystem-explorer-options](filesystem-explorer-options.png) -Alternatively, you can add fields by using the autocomplete shortcut (Ctrl + Space). This will show queryable fields on the `File` nodes. +वैकल्पिक रूप से, आप स्वतः पूर्ण शॉर्टकट ( Ctrl + Space ) का उपयोग करके फ़ील्ड जोड़ सकते हैं। यह `File` नोड्स पर क्वेरी करने योग्य फ़ील्ड दिखाएगा। ![filesystem-autocomplete](filesystem-autocomplete.png) -Try adding a number of fields to your query, pressing Ctrl + Enter -each time to re-run the query. You'll see the updated query results: +अपनी क्वेरी में कई फ़ील्ड जोड़ने का प्रयास करें, Ctrl + Enter दबाएं +हर बार क्वेरी को फिर से चलाने के लिए। आपको अपडेट किए गए क्वेरी परिणाम दिखाई देंगे: ![allfile-query](allfile-query.png) -The result is an array of `File` "nodes" (node is a fancy name for an object in a -"graph"). Each `File` node object has the fields you queried for. +इसका परिणाम 'File` "nodes" का एक सरणी है (नोड एक में एक वस्तु के लिए एक फैंसी नाम है +"graph")। प्रत्येक 'File' नोड ऑब्जेक्ट में आपके द्वारा क्वेर किए गए फ़ील्ड हैं। -## Build a page with a GraphQL query +## एक GraphQL क्वेरी के साथ एक पृष्ठ बनाएँ -Building new pages with Gatsby often starts in GraphiQL. You first sketch out -the data query by playing in GraphiQL then copy this to a React page component -to start building the UI. +Gatsby के साथ नए पृष्ठों का निर्माण अक्सर GraphiQL में शुरू होता है। आप पहले स्केच करें +GraphiQL में खेलने के द्वारा डेटा क्वेरी तो एक प्रतिक्रिया पृष्ठ घटक के लिए इसे कॉपी +UI का निर्माण शुरू करने के लिए। -Let's try this. +चलो यह करके देखें। -Create a new file at `src/pages/my-files.js` with the `allFile` GraphQL query you just -created: +`Src / Pages / my-files.js` पर एक नई फ़ाइल बनाएँ, जिसमें 'allFile` GraphQL क्वेरी आपके लिए है +बनाया था: ```jsx:title=src/pages/my-files.js import React from "react" @@ -142,18 +143,20 @@ export const query = graphql` ` ``` -The `console.log(data)` line is highlighted above. It's often helpful when -creating a new component to console out the data you're getting from the GraphQL query -so you can explore the data in your browser console while building the UI. +`console.log(data)` रेखा के ऊपर प्रकाश डाला गया है। यह अक्सर मददगार होता है +GraphQL क्वेरी से आपके द्वारा प्राप्त किए जा रहे डेटा को सांत्वना देने के लिए एक नया घटक बनाना +इसलिए आप UI बनाते समय अपने ब्राउज़र कंसोल में डेटा का पता लगा सकते हैं। + +यदि आप `/my-files/` पर नए पृष्ठ पर जाते हैं और अपने ब्राउज़र कंसोल को खोलते हैं +आप कुछ इस तरह देखेंगे: -If you visit the new page at `/my-files/` and open up your browser console -you will see something like: ![data-in-console](data-in-console.png) -The shape of the data matches the shape of the GraphQL query. +डेटा का आकार GraphQL क्वेरी के आकार से मेल खाता है। + +फ़ाइल डेटा को प्रिंट करने के लिए अपने घटक में कुछ कोड जोड़ें। -Add some code to your component to print out the File data. ```jsx:title=src/pages/my-files.js import React from "react" @@ -209,10 +212,10 @@ export const query = graphql` ` ``` -And now visit [http://localhost:8000/my-files](http://localhost:8000/my-files)… 😲 +और अब [http://localhost:8000/my-files](http://localhost:8000/my-files)… पर जाएँ 😲 ![my-files-page](my-files-page.png) -## What's coming next? +## आगे क्या आ रहा है? -Now you've learned how source plugins bring data _into_ Gatsby’s data system. In the next tutorial, you'll learn how transformer plugins _transform_ the raw content brought by source plugins. The combination of source plugins and transformer plugins can handle all data sourcing and data transformation you might need when building a Gatsby site. Learn about transformer plugins in [part six of the tutorial](/tutorial/part-six/). +अब आप जान गए हैं कि स्रोत प्लगइन data_into_ Gatsby का डेटा सिस्टम कैसे लाते हैं। अगले ट्यूटोरियल में, आप सीखेंगे कि कैसे ट्रांसफॉर्मर प्लगइन्स _transform_ स्रोत प्लगइन्स द्वारा लाया गया कच्चा माल है। स्रोत प्लगइन्स और ट्रांसफ़ॉर्मर प्लगइन्स का संयोजन सभी डेटा सोर्सिंग और डेटा ट्रांसफ़ॉर्मेशन को हैंडल कर सकता है जो आपको एक Gatsby साइट के निर्माण के समय की आवश्यकता हो सकती है।(/tutorial/part-six/) में ट्रांसफॉर्मर प्लगइन्स के बारे में जानें। From 1960cb19b27e9016c4fe339077e3dd7d6a011838 Mon Sep 17 00:00:00 2001 From: KiranAkadas Date: Sun, 10 Nov 2019 21:55:09 +0530 Subject: [PATCH 2/9] changes --- docs/tutorial/part-five/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index 83f2692..5649bf5 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -1,5 +1,5 @@ --- -शीर्षक: Source Plugins +शीर्षक: सोर्स प्लगइन्स typora-copy-images-to: ./ disableTableOfContents: true --- @@ -8,9 +8,9 @@ disableTableOfContents: true ## इस ट्यूटोरियल में क्या है? -इस ट्यूटोरियल में, आप GraphQL और स्रोत प्लगइन्स का उपयोग करके अपने Gatsby साइट में डेटा को कैसे खींचना सीख सकते हैं। इससे पहले कि आप इन प्लगइन्स के बारे में जानें, आप यह जानना चाहते हैं कि GraphQL नामक एक चीज़ का उपयोग कैसे किया जाए, जो कि आपके प्रश्नों को सही ढंग से बनाने में मदद करता है। +इस ट्यूटोरियल में, आप GraphQL और सोर्स प्लगइन्स का उपयोग करके अपने Gatsby साइट में डेटा को कैसे पुल करना सीख सकते हैं। इससे पहले कि आप इन प्लगइन्स के बारे में जानें, आप यह जानना चाहेंगे कि GraphQL नामक एक चीज़ का उपयोग कैसे किया जाए, जो कि आपके क्वेरीज़ को सही ढंग से बनाने में मदद करता है। -## परिचय GraphQL +## GraphiQL से परिचय GraphQL, GraphQL एकीकृत विकास वातावरण (आईडीई) है। यह एक शक्तिशाली (और सभी के आसपास भयानक) उपकरण है जिसका उपयोग आप अक्सर Gatsby वेबसाइटों के निर्माण के दौरान करेंगे। @@ -40,15 +40,15 @@ Gatsby साइटों में डेटा कहीं से भी आ स्रोत प्लगइन्स अपने स्रोत से डेटा प्राप्त करते हैं। जैसे फाइल सिस्टम स्रोत प्लगइन फाइल सिस्टम से डेटा प्राप्त करना जानता है। वर्डप्रेस प्लगइन वर्डप्रेस एपीआई से डेटा प्राप्त करना जानता है। -[`Gatsby-source-filesystem`] (/packages/gatsby-source-filesystem/) जोड़ें और जानें कि यह कैसे काम करता है। +[`Gatsby-source-filesystem`] (/packages/gatsby-source-filesystem/) ऐड करें और जानें कि यह कैसे काम करता है। -सबसे पहले, परियोजना की जड़ में प्लगइन स्थापित करें: +सबसे पहले, प्रोजेक्ट की रुट में प्लगइन इंस्टॉल करें: ```shell npm install --save gatsby-source-filesystem ``` -फिर इसे अपने `gatsby-config.js` में जोड़ें: +फिर इसे अपने `gatsby-config.js` में ऐड करें: ```javascript:title=gatsby-config.js module.exports = { From e374950530107bfc562c6a44d09fbdeeaebb4376 Mon Sep 17 00:00:00 2001 From: KiranAkadas Date: Sun, 10 Nov 2019 21:59:56 +0530 Subject: [PATCH 3/9] changes2 --- docs/tutorial/part-five/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index 5649bf5..e9e4160 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -38,7 +38,7 @@ GraphiQL एक्सप्लोरर आपको इन प्रश्न Gatsby साइटों में डेटा कहीं से भी आ सकता है: एपीआई, डेटाबेस, सीएमएस, स्थानीय फाइलें, आदि। -स्रोत प्लगइन्स अपने स्रोत से डेटा प्राप्त करते हैं। जैसे फाइल सिस्टम स्रोत प्लगइन फाइल सिस्टम से डेटा प्राप्त करना जानता है। वर्डप्रेस प्लगइन वर्डप्रेस एपीआई से डेटा प्राप्त करना जानता है। +सोर्स प्लगइन्स अपने सोर्स से डेटा प्राप्त करते हैं। जैसे फाइल सिस्टम सोर्स प्लगइन फाइल सिस्टम से डेटा प्राप्त करना जानता है। वर्डप्रेस प्लगइन वर्डप्रेस एपीआई से डेटा प्राप्त करना जानता है। [`Gatsby-source-filesystem`] (/packages/gatsby-source-filesystem/) ऐड करें और जानें कि यह कैसे काम करता है। @@ -218,4 +218,4 @@ export const query = graphql` ## आगे क्या आ रहा है? -अब आप जान गए हैं कि स्रोत प्लगइन data_into_ Gatsby का डेटा सिस्टम कैसे लाते हैं। अगले ट्यूटोरियल में, आप सीखेंगे कि कैसे ट्रांसफॉर्मर प्लगइन्स _transform_ स्रोत प्लगइन्स द्वारा लाया गया कच्चा माल है। स्रोत प्लगइन्स और ट्रांसफ़ॉर्मर प्लगइन्स का संयोजन सभी डेटा सोर्सिंग और डेटा ट्रांसफ़ॉर्मेशन को हैंडल कर सकता है जो आपको एक Gatsby साइट के निर्माण के समय की आवश्यकता हो सकती है।(/tutorial/part-six/) में ट्रांसफॉर्मर प्लगइन्स के बारे में जानें। +अब आप जान गए हैं कि सोर्स प्लगइन data_into_ Gatsby का डेटा सिस्टम कैसे लाते हैं। अगले ट्यूटोरियल में, आप सीखेंगे कि कैसे ट्रांसफॉर्मर प्लगइन्स _transform_ सोर्स प्लगइन्स द्वारा लाया गया कच्चा माल है। सोर्स प्लगइन्स और ट्रांसफ़ॉर्मर प्लगइन्स का संयोजन सभी डेटा सोर्सिंग और डेटा ट्रांसफ़ॉर्मेशन को हैंडल कर सकता है जो आपको एक Gatsby साइट के निर्माण के समय की आवश्यकता हो सकती है।(/tutorial/part-six/) में ट्रांसफॉर्मर प्लगइन्स के बारे में जानें। From 20b9b815f962f79be1d5ba8e06405bde1e51a257 Mon Sep 17 00:00:00 2001 From: KiranAkadas Date: Sun, 10 Nov 2019 22:15:56 +0530 Subject: [PATCH 4/9] changes3 --- docs/tutorial/part-five/index.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index e9e4160..acd7cbb 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -12,10 +12,9 @@ disableTableOfContents: true ## GraphiQL से परिचय -GraphQL, GraphQL एकीकृत विकास वातावरण (आईडीई) है। यह एक शक्तिशाली (और सभी के आसपास भयानक) उपकरण है जिसका उपयोग आप अक्सर Gatsby वेबसाइटों के निर्माण के दौरान करेंगे। +GraphiQL, GraphQL एकीकृत डेवलपमेंट एनवीरोनमेंट (आईडीई) है। यह एक शक्तिशाली (और हर तरह से बहुत बढ़िया) टूल है जिसका उपयोग आप अक्सर Gatsby वेबसाइटों के निर्माण के दौरान करेंगे। - -जब आपकी साइट का विकास सर्वर सामान्य रूप से चल रहा हो तो आप इसे एक्सेस कर सकते हैं +जब आपकी साइट का डेवलपमेंट सर्वर सामान्य रूप से चल रहा हो तो आप इसे एक्सेस कर सकते हैं . -अंतर्निहित 'site' "type" के आसपास प्रहार करें और देखें कि उस पर कौन से फ़ील्ड उपलब्ध हैं - जिसमें आप पहले से साइट किए गए `siteMetadata` ऑब्जेक्ट को शामिल करते हैं। GraphiQL खोलने की कोशिश करो और अपने डेटा के साथ खेलते हैं! स्वत: पूर्ण विंडो लाने के लिए Ctrl + Space (या वैकल्पिक कीबोर्ड शॉर्टकट के रूप में Shift + Space का उपयोग करें) और Ctrl + को चलाने के लिए रेखांकन क्वेरी। आप शेष ट्यूटोरियल के माध्यम से बहुत अधिक GraphQL का उपयोग करेंगे। +`Site` के बिल्ट-इन "type" को खोजें और देखें कि उस पर कौन से फ़ील्ड उपलब्ध हैं - `siteMetadata` ऑब्जेक्ट के साथ जो आपने पहले क्वेरी किये थे। GraphiQL को खोल के और अपने डेटा के साथ खेल के देखें। ऑटोकम्पलीट विंडो लाने के लिए Ctrl + Space को दबाएं (या Shift + Space का इस्तेमाल करें अल्टेरनाते कीबोर्ड शॉर्टकट के रूप में) और Ctrl + Enter GraphQL क्वेरी रन करने के लिए। बाकि के बचे हुए ट्यूटोरियल से बहुत अधिक GraphiQL का उपयोग करेंगे। ## GraphiQL एक्सप्लोरर का उपयोग करना -GraphiQL एक्सप्लोरर आपको इन प्रश्नों को हाथ से टाइप करने की दोहराव प्रक्रिया के बिना उपलब्ध फ़ील्ड और इनपुट के माध्यम से क्लिक करके इंटरएक्टिव तरीके से पूर्ण क्वेरी बनाने में सक्षम बनाता है। +GraphiQL एक्सप्लोरर आपको इन क्वेरीज़ को हाथ से टाइप करने की दोहराव प्रक्रिया के बिना उपलब्ध फ़ील्ड और इनपुट के माध्यम से क्लिक करके इंटरएक्टिव तरीके से पूर्ण क्वेरी बनाने में सक्षम बनाता है। -## Source plugins +## सोर्स प्लगइन्स -Gatsby साइटों में डेटा कहीं से भी आ सकता है: एपीआई, डेटाबेस, सीएमएस, स्थानीय फाइलें, आदि। +Gatsby साइटों में डेटा कहीं से भी आ सकता है: APIs, डेटाबेस, CMSs, लोकल फाइलें, आदि। -सोर्स प्लगइन्स अपने सोर्स से डेटा प्राप्त करते हैं। जैसे फाइल सिस्टम सोर्स प्लगइन फाइल सिस्टम से डेटा प्राप्त करना जानता है। वर्डप्रेस प्लगइन वर्डप्रेस एपीआई से डेटा प्राप्त करना जानता है। +सोर्स प्लगइन्स अपने सोर्स से डेटा प्राप्त करते हैं। जैसे फाइल सिस्टम सोर्स प्लगइन फाइल सिस्टम से डेटा प्राप्त करना जानता है। Wordpess प्लगइन Wordpress API से डेटा प्राप्त करना जानता है। -[`Gatsby-source-filesystem`] (/packages/gatsby-source-filesystem/) ऐड करें और जानें कि यह कैसे काम करता है। +[`Gatsby-source-filesystem`](/packages/gatsby-source-filesystem/) ऐड करें और जानें कि यह कैसे काम करता है। सबसे पहले, प्रोजेक्ट की रुट में प्लगइन इंस्टॉल करें: From 101487cb854574b4bd57db156a5ec71d0b7fc8fa Mon Sep 17 00:00:00 2001 From: KiranAkadas Date: Tue, 12 Nov 2019 14:12:25 +0530 Subject: [PATCH 5/9] change4 --- docs/tutorial/part-five/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index acd7cbb..be41ec3 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -75,9 +75,9 @@ module.exports = { } ``` -सहेजें और gatsby विकास सर्वर को पुनरारंभ करें। इसके बाद फिर से GraphiQL को खोलें। +सेव करें और gatsby डेवलपमेंट सर्वर को पुनरारंभ करें। इसके बाद फिर से GraphiQL को खोलें। -एक्सप्लोरर फलक में, आप `allFile` और` file` चयनों के रूप में उपलब्ध देखेंगे: +एक्सप्लोरर पैन में, आप `allFile` और` file` सिलेक्शनस के रूप में उपलब्ध देखेंगे: ![graphiql-filesystem](graphiql-filesystem.png) From f90b571a4a38f6cd0bd7c37af77ec2047118579f Mon Sep 17 00:00:00 2001 From: KiranAkadas Date: Tue, 12 Nov 2019 14:15:55 +0530 Subject: [PATCH 6/9] change5 --- docs/tutorial/part-five/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index be41ec3..6a683e4 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -81,25 +81,25 @@ module.exports = { ![graphiql-filesystem](graphiql-filesystem.png) -`AllFile` ड्रॉपडाउन पर क्लिक करें। क्वेरी क्षेत्र में `allFile 'के बाद अपना कर्सर रखें, और फिर टाइप करें Ctrl + Enter । यह प्रत्येक फ़ाइल के `आईडी` के लिए एक क्वेरी भर देगा। क्वेरी चलाने के लिए "Play" दबाएं: +`AllFile` ड्रॉपडाउन पर क्लिक करें। क्वेरी क्षेत्र में `allFile` के बाद अपना कर्सर रखें, और फिर टाइप करें Ctrl + Enter। यह प्रत्येक फ़ाइल के `आईडी` के लिए एक क्वेरी भर देगा। क्वेरी चलाने के लिए "Play" दबाएं: ![filesystem-query](filesystem-query.png) -एक्सप्लोरर फलक में, `आईडी` फ़ील्ड को स्वचालित रूप से चुना गया है। फ़ील्ड के संबंधित चेकबॉक्स की जाँच करके अधिक फ़ील्ड के लिए चयन करें। नए फ़ील्ड के साथ क्वेरी चलाने के लिए "Play" दबाएं: +एक्सप्लोरर पैन में, `id` फ़ील्ड को ऑटोमेटिकली चुना गया है। फ़ील्ड के संबंधित चेकबॉक्स की जाँच करके अधिक फ़ील्ड के लिए चयन करें। नए फ़ील्ड के साथ क्वेरी चलाने के लिए "Play" दबाएं: ![filesystem-explorer-options](filesystem-explorer-options.png) -वैकल्पिक रूप से, आप स्वतः पूर्ण शॉर्टकट ( Ctrl + Space ) का उपयोग करके फ़ील्ड जोड़ सकते हैं। यह `File` नोड्स पर क्वेरी करने योग्य फ़ील्ड दिखाएगा। +वैकल्पिक रूप से, आप ऑटोकम्पलीट शॉर्टकट (Ctrl + Space) का उपयोग करके फ़ील्ड जोड़ सकते हैं। यह `File` नोड्स पर क्वेरी करने योग्य फ़ील्ड दिखाएगा। ![filesystem-autocomplete](filesystem-autocomplete.png) -अपनी क्वेरी में कई फ़ील्ड जोड़ने का प्रयास करें, Ctrl + Enter दबाएं +अपनी क्वेरी में कई फ़ील्ड जोड़ने का प्रयास करें, Ctrl + Enter दबाएं हर बार क्वेरी को फिर से चलाने के लिए। आपको अपडेट किए गए क्वेरी परिणाम दिखाई देंगे: ![allfile-query](allfile-query.png) -इसका परिणाम 'File` "nodes" का एक सरणी है (नोड एक में एक वस्तु के लिए एक फैंसी नाम है -"graph")। प्रत्येक 'File' नोड ऑब्जेक्ट में आपके द्वारा क्वेर किए गए फ़ील्ड हैं। +इसका रिजल्ट 'File` "nodes" का एक ऐरे है (नोड एक "graph" में एक ऑब्जेक्ट के लिए एक फैंसी नाम है)। +प्रत्येक 'File' नोड ऑब्जेक्ट में आपके द्वारा क्वेरीड किए गए फ़ील्ड हैं। ## एक GraphQL क्वेरी के साथ एक पृष्ठ बनाएँ From 3a5292ed0f667a35d27641a47bb7c33ea9701c70 Mon Sep 17 00:00:00 2001 From: KiranAkadas Date: Wed, 13 Nov 2019 19:18:42 +0530 Subject: [PATCH 7/9] change5 --- docs/tutorial/part-five/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index 6a683e4..0dee5f6 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -77,11 +77,11 @@ module.exports = { सेव करें और gatsby डेवलपमेंट सर्वर को पुनरारंभ करें। इसके बाद फिर से GraphiQL को खोलें। -एक्सप्लोरर पैन में, आप `allFile` और` file` सिलेक्शनस के रूप में उपलब्ध देखेंगे: +एक्सप्लोरर पैन में, आप `allFile` और` file` सलेक्शनस के रूप में उपलब्ध देखेंगे: ![graphiql-filesystem](graphiql-filesystem.png) -`AllFile` ड्रॉपडाउन पर क्लिक करें। क्वेरी क्षेत्र में `allFile` के बाद अपना कर्सर रखें, और फिर टाइप करें Ctrl + Enter। यह प्रत्येक फ़ाइल के `आईडी` के लिए एक क्वेरी भर देगा। क्वेरी चलाने के लिए "Play" दबाएं: +`AllFile` ड्रॉपडाउन पर क्लिक करें। क्वेरी क्षेत्र में `allFile` के बाद अपना कर्सर रखें, और फिर टाइप करें Ctrl + Enter। यह प्रत्येक फ़ाइल के `आईडी` के लिए एक क्वेरी भर देगा। क्वेरी चलाने के लिए "Play" दबाएं: ![filesystem-query](filesystem-query.png) @@ -89,11 +89,11 @@ module.exports = { ![filesystem-explorer-options](filesystem-explorer-options.png) -वैकल्पिक रूप से, आप ऑटोकम्पलीट शॉर्टकट (Ctrl + Space) का उपयोग करके फ़ील्ड जोड़ सकते हैं। यह `File` नोड्स पर क्वेरी करने योग्य फ़ील्ड दिखाएगा। +वैकल्पिक रूप से, आप ऑटोकम्पलीट शॉर्टकट (Ctrl + Space) का उपयोग करके फ़ील्ड जोड़ सकते हैं। यह `File` नोड्स पर क्वेरी करने योग्य फ़ील्ड दिखाएगा। ![filesystem-autocomplete](filesystem-autocomplete.png) -अपनी क्वेरी में कई फ़ील्ड जोड़ने का प्रयास करें, Ctrl + Enter दबाएं +अपनी क्वेरी में कई फ़ील्ड जोड़ने का प्रयास करें, Ctrl + Enter दबाएं हर बार क्वेरी को फिर से चलाने के लिए। आपको अपडेट किए गए क्वेरी परिणाम दिखाई देंगे: ![allfile-query](allfile-query.png) From 7ca71882c0b30b47864aa1a2b9a542261549a027 Mon Sep 17 00:00:00 2001 From: KiranAkadas Date: Thu, 14 Nov 2019 01:14:19 +0530 Subject: [PATCH 8/9] changes6 --- docs/tutorial/part-five/index.md | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index 0dee5f6..0154d26 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -101,16 +101,16 @@ module.exports = { इसका रिजल्ट 'File` "nodes" का एक ऐरे है (नोड एक "graph" में एक ऑब्जेक्ट के लिए एक फैंसी नाम है)। प्रत्येक 'File' नोड ऑब्जेक्ट में आपके द्वारा क्वेरीड किए गए फ़ील्ड हैं। -## एक GraphQL क्वेरी के साथ एक पृष्ठ बनाएँ +## एक GraphQL क्वेरी के साथ एक पेज बनाएँ -Gatsby के साथ नए पृष्ठों का निर्माण अक्सर GraphiQL में शुरू होता है। आप पहले स्केच करें -GraphiQL में खेलने के द्वारा डेटा क्वेरी तो एक प्रतिक्रिया पृष्ठ घटक के लिए इसे कॉपी -UI का निर्माण शुरू करने के लिए। +Gatsby के साथ नए पेजेज़ का निर्माण अक्सर GraphiQL में शुरू होता है। पहले अाप डेटा क्वेरी +की रूपरेखा Graphiql को इस्तेमाल करके के बना लें उसके बाद UI का निर्माण शुरू करने के लिए इसको +कॉपी करके React पेज के कौम्पोनॅन्ट में डालें। -चलो यह करके देखें। +चलो इसे टराइ करके देखते हैं। -`Src / Pages / my-files.js` पर एक नई फ़ाइल बनाएँ, जिसमें 'allFile` GraphQL क्वेरी आपके लिए है -बनाया था: +`src/pages/my-files.js` पर एक नयी फाइल बनाएं `allFile` GraphQL क्वेरी के साथ जो अपने अभी +बनाई थी: ```jsx:title=src/pages/my-files.js import React from "react" @@ -142,19 +142,18 @@ export const query = graphql` ` ``` -`console.log(data)` रेखा के ऊपर प्रकाश डाला गया है। यह अक्सर मददगार होता है -GraphQL क्वेरी से आपके द्वारा प्राप्त किए जा रहे डेटा को सांत्वना देने के लिए एक नया घटक बनाना -इसलिए आप UI बनाते समय अपने ब्राउज़र कंसोल में डेटा का पता लगा सकते हैं। - -यदि आप `/my-files/` पर नए पृष्ठ पर जाते हैं और अपने ब्राउज़र कंसोल को खोलते हैं -आप कुछ इस तरह देखेंगे: +`console.log(data)` लाइन ऊपर हाइलाइटेड है।एक नया कौम्पोनॅन्ट बनाने में +GraphQL क्वेरी से मिला हुआ डाटा कंसोल में आउटपुट करने में मददगार होता है +इससे अाप UI बनाते समय अपने ब्राउज़र कंसोल में डेटा को देख और समझ सकते हैं। +यदि आप `/my-files/` पर नए पेज पर जाते हैं और अपने ब्राउज़र कंसोल को खोलते हैं +तो अापको उसमें कुछ ऐसा दिखेगा: ![data-in-console](data-in-console.png) डेटा का आकार GraphQL क्वेरी के आकार से मेल खाता है। -फ़ाइल डेटा को प्रिंट करने के लिए अपने घटक में कुछ कोड जोड़ें। +फ़ाइल डेटा को प्रिंट करने के लिए अपने कौम्पोनॅन्ट में कुछ कोड लिखें। ```jsx:title=src/pages/my-files.js @@ -211,10 +210,10 @@ export const query = graphql` ` ``` -और अब [http://localhost:8000/my-files](http://localhost:8000/my-files)… पर जाएँ 😲 +और अब [http://localhost:8000/my-files](http://localhost:8000/my-files)… पर जाएँ। 😲 ![my-files-page](my-files-page.png) ## आगे क्या आ रहा है? -अब आप जान गए हैं कि सोर्स प्लगइन data_into_ Gatsby का डेटा सिस्टम कैसे लाते हैं। अगले ट्यूटोरियल में, आप सीखेंगे कि कैसे ट्रांसफॉर्मर प्लगइन्स _transform_ सोर्स प्लगइन्स द्वारा लाया गया कच्चा माल है। सोर्स प्लगइन्स और ट्रांसफ़ॉर्मर प्लगइन्स का संयोजन सभी डेटा सोर्सिंग और डेटा ट्रांसफ़ॉर्मेशन को हैंडल कर सकता है जो आपको एक Gatsby साइट के निर्माण के समय की आवश्यकता हो सकती है।(/tutorial/part-six/) में ट्रांसफॉर्मर प्लगइन्स के बारे में जानें। +अब आप जान गए हैं कि सोर्स प्लगइन से डेटा _into_ Gatsby डेटा सिस्टम में कैसे लाते हैं। अगले ट्यूटोरियल में, आप सीखेंगे कि ट्रांसफॉर्मर प्लगइन्स सोर्स प्लगइन्स द्वारा लाया गया रौ डेटा कैसे _transform_ करता है। सोर्स प्लगइन्स और ट्रांसफ़ॉर्मर प्लगइन्स का संयोजन सभी डेटा सोर्सिंग और डेटा ट्रांसफ़ॉर्मेशन को हैंडल कर सकता है जो आपको एक Gatsby साइट के निर्माण के समय की आवश्यकता हो सकती है। [ट्यूटोरियल के छठे भाग](/tutorial/part-six/) में ट्रांसफॉर्मर प्लगइन्स के बारे में और जानें। From fb654bc8908059243d99f7a8785149a26fa9a0b7 Mon Sep 17 00:00:00 2001 From: KiranAkadas Date: Thu, 14 Nov 2019 11:28:40 +0530 Subject: [PATCH 9/9] change7 --- docs/tutorial/part-five/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index 0154d26..cee3e37 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -109,7 +109,7 @@ Gatsby के साथ नए पेजेज़ का निर्माण अ चलो इसे टराइ करके देखते हैं। -`src/pages/my-files.js` पर एक नयी फाइल बनाएं `allFile` GraphQL क्वेरी के साथ जो अपने अभी +`src/pages/my-files.js` पर एक नयी फाइल बनाएं `allFile` GraphQL क्वेरी के साथ जो आपने अभी बनाई थी: ```jsx:title=src/pages/my-files.js @@ -142,7 +142,7 @@ export const query = graphql` ` ``` -`console.log(data)` लाइन ऊपर हाइलाइटेड है।एक नया कौम्पोनॅन्ट बनाने में +`console.log(data)` लाइन ऊपर हाइलाइटेड है। एक नया कौम्पोनॅन्ट बनाने में GraphQL क्वेरी से मिला हुआ डाटा कंसोल में आउटपुट करने में मददगार होता है इससे अाप UI बनाते समय अपने ब्राउज़र कंसोल में डेटा को देख और समझ सकते हैं।