diff --git a/docs/docs/graphql-api.md b/docs/docs/graphql-api.md index d64f64ec9..1cc265ead 100644 --- a/docs/docs/graphql-api.md +++ b/docs/docs/graphql-api.md @@ -6,49 +6,49 @@ tableOfContentsDepth: 2 import { GraphqlApiQuery } from "../../www/src/components/api-reference/doc-static-queries" import APIReference from "../../www/src/components/api-reference" -A great advantage of Gatsby is a built-in data layer that combines all data sources you configure. Data is collected at [build time](/docs/glossary#build) and automatically assembled into a [schema](/docs/glossary#schema) that defines how data can be queried throughout your site. +Gatsby を使う大きな利点は、標準機能としてのデータレイヤーがあり、あなた自身が設定可能な全てのデータソースを含んでいることです。データは[ビルド時](/docs/glossary#build)に集められ、サイト上でデータをどのように処理するかを定義する[スキーマ](/docs/glossary#schema) として組み立てられます。 -This doc serves as a reference for GraphQL features built into Gatsby, including methods for querying and sourcing data, and customizing GraphQL for your site's needs. +このページでは Gatsby で使用される GraphQL の特長について、クエリーやデータをソースする方法・サイトごとに合わせた GraphQL カスタマイズ方法などについて説明します。 -## Getting started with GraphQL +## GraphQL を使う -GraphQL is available in Gatsby without a special install: a schema is automatically inferred and created when you run `gatsby develop` or `gatsby build`. When the site compiles, the data layer can be [explored](/docs/running-queries-with-graphiql/) at: `http://localhost:8000/___graphql` +Gatsby で GraphQL を使うさい、特別なインストールは必要ありません。`gatsby develop` か `gatsby build` コマンドを使ったとき、スキーマは自動的に統合・作成されます。サイトがコンパイルしたあと、データレイヤーは `http://localhost:8000/___graphql` で[確認できます](/docs/running-queries-with-graphiql/)。 -## Sourcing data +## データをソースする -Data needs to be [sourced](/docs/content-and-data/) — or added to the GraphQL schema — to be queried and pulled into pages using GraphQL. Gatsby uses [source plugins](/plugins/?=gatsby-source) to pull in data. +GraphQL でリクエストしたデータをページに読み込むためには、データを[ソース](/docs/content-and-data/)する、つまり GraphQL スキーマに追加する必要があります。Gatsby はデータを取得するために、[ソースプラグイン](/plugins/?=gatsby-source)を使っています。 -**Note**: GraphQL isn't required: you can still [use Gatsby without GraphQL](/docs/using-gatsby-without-graphql/). +**注意**: GraphQL の使用が必須ということはありません。Gatsby を [GraphQL 無しで使う](/docs/using-gatsby-without-graphql/)こともできます。 -To source data with an existing plugin you have to install all needed packages. Furthermore you have to add the plugin to the plugins array in the `gatsby-config` with any optional configurations. If you want to source data from the filesystem for use with GraphQL, such as Markdown files, images, and more, refer to the [filesystem data sourcing docs](/docs/sourcing-from-the-filesystem/) and [recipes](/docs/recipes/sourcing-data). +データを既存のプラグインを使ってソースするには、まず全ての必要なパッケージをインストールします。さらに、そのプラグインは `gatsby-config` 内のプラグイン欄に設定とともに追加する必要があります。あなたがもし、Markdown ファイルや画像などファイルシステムデータを GraphQL でソースしたければ、[ファイルシステムからデータをソースする](/docs/sourcing-from-the-filesystem/) と [レシピ集](/docs/recipes/sourcing-data)をご覧ください。 -For instructions on installing plugins from npm, take a look at the instructions in the docs on [using a plugin](/docs/using-a-plugin-in-your-site/). +npm からプラグインをインストールする方法については、[プラグインを使う](/docs/using-a-plugin-in-your-site/)ドキュメント内の指示をご覧ください。 -You can also [create custom plugins](/docs/creating-plugins/) to fit your own use cases and pull in data however you want. +また、あなたのプロジェクトにより合ったやり方でデータを取得したければ、[カスタムプラグインを作成](/docs/creating-plugins/)することもできます。 -## Query components and hooks +## クエリーコンポーネントとフック -Data can be queried inside pages, components, or the `gatsby-node.js` file, using one of these options: +以下のいずれかの方法を使うことで、ページ内・コンポーネント内・もしくは `gatsby-node.js` ファイル内でデータをクエリーできます。 -- The `pageQuery` component -- The `StaticQuery` component -- The `useStaticQuery` hook +- `pageQuery` コンポーネント +- `StaticQuery` コンポーネント +- `useStaticQuery` フック -**Note**: Because of how Gatsby processes GraphQL queries, you can't mix page queries and static queries in the same file. You also can't have multiple page queries or static queries in one file. +**注意**: Gatsby が GraphQL クエリーをどのように処理するかの流れ上、ページクエリーと静的クエリーを同じファイル内で併用することはできません。また、1 つのファイル内で複数のページクエリーや静的クエリーを使うこともできません。 -For information on page and non-page components as they relate to queries, check out the docs guide on [building with components](/docs/building-with-components/#how-does-gatsby-use-react-components) +クエリーに関連したページコンポーネントもしくは非ページコンポーネントについては、[コンポーネントを使う](/docs/building-with-components/#how-does-gatsby-use-react-components)ドキュメントのガイドをご覧ください。 ### `pageQuery` -`pageQuery` is a built-in component that retrieves information from the data layer in Gatsby pages. You can have one page query per page. It can take GraphQL arguments for variables in your queries. +`pageQuery`は、Gatsby ページ内のデータレイヤーから情報を取得するための標準コンポーネントです。1 ページごとに 1 クエリー持つことができます。GraphQL の引数をクエリー内の変数に使うことができます。 -A [page is made in Gatsby](/docs/page-creation/) by any React component in the `src/pages` folder, or by calling the `createPage` action and using a component in the `createPage` options -- meaning a `pageQuery` won't work in any component, only in components which meet this criteria. +`src/pages` フォルダー内の React コンポーネントを使い [Gatsby で作成されたページ](/docs/page-creation/)、または `createPage` アクションによって `createPage` オプション内のコンポーネントを使用して作成されたページでは、`pageQuery` はどのコンポーネント内でも使えないことになり、上記の制約内のみでしか使えません。 -Also, refer to the [guide on querying data in pages with page query](/docs/page-query/). +[ページクエリーを使ったページ内でのデータクエリーガイド](/docs/page-query/)もご覧ください。 #### Params -A page query isn't a method, but rather an exported variable that's assigned a `graphql` string and a valid query block as its value: +ページクエリーはメソッドではなく、`graphql` 文字列と有効なクエリーブロックを入れてエクスポートされた変数です。 ```javascript export const pageQuery = graphql` @@ -62,11 +62,11 @@ export const pageQuery = graphql` ` ``` -**Note**: the query exported in a `const` doesn't need to be named `pageQuery`. More importantly, Gatsby looks for an exported `graphql` string from the file. +**注意**: `const` でエクスポートされるクエリーの変数名が `pageQuery` である必要はありません。重要なのは、Gatsby は `graphql` 文字列をファイルから探すということです。 #### Returns -When included in a page component file, a page query returns a data object that is passed automatically to the component as a prop. +`pageQuery` がページコンポーネントファイルに含まれている場合、ページクエリーは、そのコンポーネントにプロパティとして自動的に渡されたデータオブジェクトを返します。 ```jsx // highlight-start @@ -74,7 +74,7 @@ const HomePage = ({ data }) => { // highlight-end return (