Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

translated part-five #13

Merged
merged 9 commits into from
Nov 14, 2019
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 44 additions & 41 deletions docs/tutorial/part-five/index.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,33 @@
---
title: Source Plugins
शीर्षक: Source Plugins
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
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 नामक एक चीज़ का उपयोग कैसे किया जाए, जो कि आपके प्रश्नों को सही ढंग से बनाने में मदद करता है।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

## Introducing GraphiQL
## परिचय GraphQL
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

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 वेबसाइटों के निर्माण के दौरान करेंगे।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

You can access it when your site's development server is running—normally at

KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
जब आपकी साइट का विकास सर्वर सामान्य रूप से चल रहा हो तो आप इसे एक्सेस कर सकते हैं
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
<http://localhost:8000/___graphql>.

<video controls="controls" autoplay="true" loop="true">
<source type="video/mp4" src="/graphiql-explore.mp4"></source>
<p>Your browser does not support the video element.</p>
</video>

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 <kbd>Ctrl + Space</kbd> (or use <kbd>Shift + Space</kbd> as an alternate keyboard shortcut) to bring up the autocomplete window and <kbd>Ctrl + Enter</kbd> to run the GraphQL query. You'll be using GraphiQL a lot more through the remainder of the tutorial.
अंतर्निहित 'site' "type" के आसपास प्रहार करें और देखें कि उस पर कौन से फ़ील्ड उपलब्ध हैं - जिसमें आप पहले से साइट किए गए `siteMetadata` ऑब्जेक्ट को शामिल करते हैं। GraphiQL खोलने की कोशिश करो और अपने डेटा के साथ खेलते हैं! स्वत: पूर्ण विंडो लाने के लिए <kbd> Ctrl + Space </ kbd> (या वैकल्पिक कीबोर्ड शॉर्टकट के रूप में <kbd> Shift + Space </ kbd> का उपयोग करें) और <kbd> Ctrl + </ kbd> को चलाने के लिए रेखांकन क्वेरी। आप शेष ट्यूटोरियल के माध्यम से बहुत अधिक GraphQL का उपयोग करेंगे।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

## 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 एक्सप्लोरर आपको इन प्रश्नों को हाथ से टाइप करने की दोहराव प्रक्रिया के बिना उपलब्ध फ़ील्ड और इनपुट के माध्यम से क्लिक करके इंटरएक्टिव तरीके से पूर्ण क्वेरी बनाने में सक्षम बनाता है।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

<EggheadEmbed
lessonLink="https://egghead.io/lessons/gatsby-build-a-graphql-query-using-gatsby-s-graphiql-explorer"
Expand All @@ -35,19 +36,19 @@ The GraphiQL Explorer enables you to interactively construct full queries by cli

## Source plugins
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

Data in Gatsby sites can come from anywhere: APIs, databases, CMSs, local files, etc.
Gatsby साइटों में डेटा कहीं से भी आ सकता है: एपीआई, डेटाबेस, सीएमएस, स्थानीय फाइलें, आदि।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

Source plugins fetch data from their source. E.g. the filesystem source plugin knows how to fetch data from the file system. The WordPress plugin knows how to fetch data from the WordPress API.
स्रोत प्लगइन्स अपने स्रोत से डेटा प्राप्त करते हैं। जैसे फाइल सिस्टम स्रोत प्लगइन फाइल सिस्टम से डेटा प्राप्त करना जानता है। वर्डप्रेस प्लगइन वर्डप्रेस एपीआई से डेटा प्राप्त करना जानता है।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

Add [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/) and explore how it works.
[`Gatsby-source-filesystem`] (/packages/gatsby-source-filesystem/) जोड़ें और जानें कि यह कैसे काम करता है।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

First, install the plugin at the root of the project:
सबसे पहले, परियोजना की जड़ में प्लगइन स्थापित करें:
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

```shell
npm install --save gatsby-source-filesystem
```

Then add it to your `gatsby-config.js`:
फिर इसे अपने `gatsby-config.js` में जोड़ें:
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

```javascript:title=gatsby-config.js
module.exports = {
Expand Down Expand Up @@ -75,42 +76,42 @@ module.exports = {
}
```

Save that and restart the gatsby development server. Then open up GraphiQL again.
सहेजें और gatsby विकास सर्वर को पुनरारंभ करें। इसके बाद फिर से GraphiQL को खोलें।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

In the explorer pane, you'll see `allFile` and `file` available as selections:
एक्सप्लोरर फलक में, आप `allFile` और` file` चयनों के रूप में उपलब्ध देखेंगे:
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

![graphiql-filesystem](graphiql-filesystem.png)

Click the `allFile` dropdown. Position your cursor after `allFile` in the query area, and then type <kbd>Ctrl + Enter</kbd>. This will pre-fill a query for the `id` of each file. Press "Play" to run the query:
`AllFile` ड्रॉपडाउन पर क्लिक करें। क्वेरी क्षेत्र में `allFile 'के बाद अपना कर्सर रखें, और फिर टाइप करें <kbd> Ctrl + Enter </ kbd>। यह प्रत्येक फ़ाइल के `आईडी` के लिए एक क्वेरी भर देगा। क्वेरी चलाने के लिए "Play" दबाएं:
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

![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" दबाएं:
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

![filesystem-explorer-options](filesystem-explorer-options.png)

Alternatively, you can add fields by using the autocomplete shortcut (<kbd>Ctrl + Space</kbd>). This will show queryable fields on the `File` nodes.
वैकल्पिक रूप से, आप स्वतः पूर्ण शॉर्टकट (<kbd> Ctrl + Space </ kbd>) का उपयोग करके फ़ील्ड जोड़ सकते हैं। यह `File` नोड्स पर क्वेरी करने योग्य फ़ील्ड दिखाएगा।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

![filesystem-autocomplete](filesystem-autocomplete.png)

Try adding a number of fields to your query, pressing <kbd>Ctrl + Enter</kbd>
each time to re-run the query. You'll see the updated query results:
अपनी क्वेरी में कई फ़ील्ड जोड़ने का प्रयास करें, <kbd> Ctrl + Enter </ kbd> दबाएं
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
हर बार क्वेरी को फिर से चलाने के लिए। आपको अपडेट किए गए क्वेरी परिणाम दिखाई देंगे:

![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" का एक सरणी है (नोड एक में एक वस्तु के लिए एक फैंसी नाम है
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved
"graph")। प्रत्येक 'File' नोड ऑब्जेक्ट में आपके द्वारा क्वेर किए गए फ़ील्ड हैं।
KiranAkadas marked this conversation as resolved.
Show resolved Hide resolved

## Build a page with a GraphQL query
## एक GraphQL क्वेरी के साथ एक पृष्ठ बनाएँ
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved

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 में शुरू होता है। आप पहले स्केच करें
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
GraphiQL में खेलने के द्वारा डेटा क्वेरी तो एक प्रतिक्रिया पृष्ठ घटक के लिए इसे कॉपी
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
UI का निर्माण शुरू करने के लिए।
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved

Let's try this.
चलो यह करके देखें।
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved

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 क्वेरी आपके लिए है
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
बनाया था:
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved

```jsx:title=src/pages/my-files.js
import React from "react"
Expand Down Expand Up @@ -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)` रेखा के ऊपर प्रकाश डाला गया है। यह अक्सर मददगार होता है
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
GraphQL क्वेरी से आपके द्वारा प्राप्त किए जा रहे डेटा को सांत्वना देने के लिए एक नया घटक बनाना
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
इसलिए आप UI बनाते समय अपने ब्राउज़र कंसोल में डेटा का पता लगा सकते हैं।
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved

यदि आप `/my-files/` पर नए पृष्ठ पर जाते हैं और अपने ब्राउज़र कंसोल को खोलते हैं
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
आप कुछ इस तरह देखेंगे:
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved

If you visit the new page at `/my-files/` and open up your browser console
you will see something like:

arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
![data-in-console](data-in-console.png)

The shape of the data matches the shape of the GraphQL query.
डेटा का आकार GraphQL क्वेरी के आकार से मेल खाता है।

फ़ाइल डेटा को प्रिंट करने के लिए अपने घटक में कुछ कोड जोड़ें।
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved

Add some code to your component to print out the File data.

```jsx:title=src/pages/my-files.js
import React from "react"
Expand Down Expand Up @@ -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)… पर जाएँ 😲
arshadkazmi42 marked this conversation as resolved.
Show resolved Hide resolved

![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/) में ट्रांसफॉर्मर प्लगइन्स के बारे में जानें।