From b23fc567d0b0e43f9543aeb186d005f895432679 Mon Sep 17 00:00:00 2001 From: nakajmg Date: Thu, 16 Jan 2020 14:17:38 +0900 Subject: [PATCH 1/9] Translate docs/use-static-query --- docs/docs/use-static-query.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/docs/use-static-query.md b/docs/docs/use-static-query.md index 57cfa977c..300bf0403 100644 --- a/docs/docs/use-static-query.md +++ b/docs/docs/use-static-query.md @@ -1,26 +1,26 @@ --- -title: Querying Data in Components with the useStaticQuery Hook +title: useStaticQuery フックを使ったコンポーネントからのクエリ --- -Gatsby v2.1.0 introduces `useStaticQuery`, a new Gatsby feature that provides the ability to use a [React Hook](https://reactjs.org/docs/hooks-intro.html) to query with GraphQL at _build time_. +Gatsby v2.1.0 で `useStaticQuery` が導入されました。これはビルド時に [React Hook](https://reactjs.org/docs/hooks-intro.html) を使って GraphQL のクエリを実行する新しい機能です。 -Just like the [StaticQuery](/docs/static-query/) component, it allows your React components to retrieve data via a GraphQL query that will be parsed, evaluated, and injected into the component. However, `useStaticQuery` is a hook rather than a component that takes a render prop! +React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリを介したデータの取得とコンポーネントへの注入を行えます。 -In this guide, you will walk through an example using `useStaticQuery`. If you're not familiar with static queries in Gatsby, you might want to check out [the difference between a static query and a page query](/docs/static-query/#how-staticquery-differs-from-page-query). +このガイドでは、 `useSaticQuery` を使った例を紹介します。もし Gatsby の静的クエリについて詳しくなければ、まずは [静的クエリとページクエリの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 -## How to use useStaticQuery in components +## コンポーネントでの useStaticQuery の使い方 -> 💡 You'll need React and ReactDOM 16.8.0 or later to use `useStaticQuery`. +> 💡 `useStaticQuery` を使うには React と ReactDOM の 16.8.0 以上が必要です。 > > 📦 `npm install react@^16.8.0 react-dom@^16.8.0` -`useStaticQuery` is a React Hook. All the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) apply. +`useStaticQuery` は React Hook です。[Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) のルールがすべて適用されます。 -It takes your GraphQL query and returns the requested data. That's it! +GraphQL クエリを受け取って、要求されたデータを返します。それだけです。 -### Basic example +### 基本の例 -Let's create a `Header` component that queries for the site title from `gatsby-config.js`: +`gatsby-config.js` からサイトのタイトルを取得する `Header` コンポーネントを作ってみましょう。 ```jsx:title=src/components/header.js import React from "react" @@ -45,11 +45,11 @@ export default () => { } ``` -### Composing custom `useStaticQuery` hooks +### カスタム `useStaticQuery` フックを作る -One of the most compelling features of hooks is the ability to compose and re-use these blocks of functionality. `useStaticQuery` is a hook. Therefore, using `useStaticQuery` allows us to compose and re-use blocks of reusable functionality. Perfect! +フックのもっとも魅力的な機能のひとつは、再利用可能な機能のまとまりを作成できることです。 `useStaticQuery` はフックです。したがって、 `useStaticQuery` を使うと再利用可能な機能のまとまりを作成できます。完璧ですね！ -A classic example is to create a `useSiteMetadata` hook which will provide the `siteMetadata` to be re-used in any component. It looks something like: +典型的な例は、どのコンポーネントでも再利用できるように `siteMetadata` を提供する `useSiteMetadata` フックを作成することです。これは次のようになります。 ```jsx:title=src/hooks/use-site-metadata.js import { useStaticQuery, graphql } from "gatsby" @@ -78,7 +78,7 @@ export const useSiteMetadata = () => { } ``` -Then just import your newly created hook, like so: +そして、次のように新しく作成したフックをインポートします。 ```jsx:title=src/pages/index.js import React from "react" @@ -90,7 +90,7 @@ export default () => { } ``` -## Known Limitations +## 既知の制限事項 -- `useStaticQuery` does not accept variables (hence the name "static"), but can be used in _any_ component, including pages -- Because of how queries currently work in Gatsby, we support only a single instance of `useStaticQuery` in a file +- `useStaticQuery` は値を受け取れません（なので `static` という名前になっています）。しかし、ページを含む*どのような*コンポーネントでも使えます。 +- `useStaticQuery` はファイル内で単一での使用のみをサポートしています。これは Gatsby の現状のクエリの仕組みによる制限です。 From cce2bc2989f2b063e6d8501ed66edcbe3a914cf2 Mon Sep 17 00:00:00 2001 From: nakajmg Date: Thu, 16 Jan 2020 14:46:31 +0900 Subject: [PATCH 2/9] fix typo --- docs/docs/use-static-query.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/use-static-query.md b/docs/docs/use-static-query.md index 300bf0403..af99fee62 100644 --- a/docs/docs/use-static-query.md +++ b/docs/docs/use-static-query.md @@ -6,7 +6,7 @@ Gatsby v2.1.0 で `useStaticQuery` が導入されました。これはビルド React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリを介したデータの取得とコンポーネントへの注入を行えます。 -このガイドでは、 `useSaticQuery` を使った例を紹介します。もし Gatsby の静的クエリについて詳しくなければ、まずは [静的クエリとページクエリの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 +このガイドでは、 `useStaticQuery` を使った例を紹介します。もし Gatsby の静的クエリについて詳しくなければ、まずは [静的クエリとページクエリの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 ## コンポーネントでの useStaticQuery の使い方 From f6a5c649e0f7a19e9038a35e1a71857f0a4f48bd Mon Sep 17 00:00:00 2001 From: nakajmg Date: Thu, 16 Jan 2020 14:47:29 +0900 Subject: [PATCH 3/9] use exclamation --- docs/docs/use-static-query.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/use-static-query.md b/docs/docs/use-static-query.md index af99fee62..a6842653b 100644 --- a/docs/docs/use-static-query.md +++ b/docs/docs/use-static-query.md @@ -16,7 +16,7 @@ React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポ `useStaticQuery` は React Hook です。[Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) のルールがすべて適用されます。 -GraphQL クエリを受け取って、要求されたデータを返します。それだけです。 +GraphQL クエリを受け取って、要求されたデータを返します。それだけです！ ### 基本の例 From dc1a02bea99953d4be539ecb51fb2ba029e97fcd Mon Sep 17 00:00:00 2001 From: nakajmg Date: Fri, 17 Jan 2020 01:54:10 +0900 Subject: [PATCH 4/9] Update docs/docs/use-static-query.md Co-Authored-By: Yasuaki Uechi --- docs/docs/use-static-query.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/use-static-query.md b/docs/docs/use-static-query.md index a6842653b..4f7c8c1fb 100644 --- a/docs/docs/use-static-query.md +++ b/docs/docs/use-static-query.md @@ -6,7 +6,7 @@ Gatsby v2.1.0 で `useStaticQuery` が導入されました。これはビルド React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリを介したデータの取得とコンポーネントへの注入を行えます。 -このガイドでは、 `useStaticQuery` を使った例を紹介します。もし Gatsby の静的クエリについて詳しくなければ、まずは [静的クエリとページクエリの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 +このガイドでは、 `useStaticQuery` を使った例を紹介します。もし Gatsby の StaticQuery について詳しくなければ、まずは [StaticQuery とページクエリの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 ## コンポーネントでの useStaticQuery の使い方 From 3eb17dd2edfced79f5834f9e99fa0c3f652b7483 Mon Sep 17 00:00:00 2001 From: nakajmg Date: Fri, 17 Jan 2020 01:56:16 +0900 Subject: [PATCH 5/9] use strong instead of italic --- docs/docs/use-static-query.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/use-static-query.md b/docs/docs/use-static-query.md index 4f7c8c1fb..5418c3834 100644 --- a/docs/docs/use-static-query.md +++ b/docs/docs/use-static-query.md @@ -92,5 +92,5 @@ export default () => { ## 既知の制限事項 -- `useStaticQuery` は値を受け取れません（なので `static` という名前になっています）。しかし、ページを含む*どのような*コンポーネントでも使えます。 +- `useStaticQuery` は値を受け取れません（なので `static` という名前になっています）。しかし、ページを含む**どのような**コンポーネントでも使えます。 - `useStaticQuery` はファイル内で単一での使用のみをサポートしています。これは Gatsby の現状のクエリの仕組みによる制限です。 From 60f722114488aacafa415529762fcfaef89b223f Mon Sep 17 00:00:00 2001 From: nakajmg Date: Fri, 17 Jan 2020 09:46:28 +0900 Subject: [PATCH 6/9] follow the style-guide --- docs/docs/use-static-query.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/docs/use-static-query.md b/docs/docs/use-static-query.md index 5418c3834..ccee33a57 100644 --- a/docs/docs/use-static-query.md +++ b/docs/docs/use-static-query.md @@ -1,12 +1,12 @@ --- -title: useStaticQuery フックを使ったコンポーネントからのクエリ +title: useStaticQuery フックを使ったコンポーネントからのクエリー --- -Gatsby v2.1.0 で `useStaticQuery` が導入されました。これはビルド時に [React Hook](https://reactjs.org/docs/hooks-intro.html) を使って GraphQL のクエリを実行する新しい機能です。 +Gatsby v2.1.0 で `useStaticQuery` が導入されました。これはビルド時に [React Hook](https://reactjs.org/docs/hooks-intro.html) を使って GraphQL のクエリーを実行する新しい機能です。 -React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリを介したデータの取得とコンポーネントへの注入を行えます。 +React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリーを介したデータの取得とコンポーネントへの注入を行えます。 -このガイドでは、 `useStaticQuery` を使った例を紹介します。もし Gatsby の StaticQuery について詳しくなければ、まずは [StaticQuery とページクエリの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 +このガイドでは、 `useStaticQuery` を使った例を紹介します。もし Gatsby の StaticQuery について詳しくなければ、まずは [StaticQuery とページクエリーの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 ## コンポーネントでの useStaticQuery の使い方 @@ -16,7 +16,7 @@ React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポ `useStaticQuery` は React Hook です。[Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) のルールがすべて適用されます。 -GraphQL クエリを受け取って、要求されたデータを返します。それだけです！ +GraphQL クエリーを受け取って、要求されたデータを返します。それだけです！ ### 基本の例 @@ -93,4 +93,4 @@ export default () => { ## 既知の制限事項 - `useStaticQuery` は値を受け取れません（なので `static` という名前になっています）。しかし、ページを含む**どのような**コンポーネントでも使えます。 -- `useStaticQuery` はファイル内で単一での使用のみをサポートしています。これは Gatsby の現状のクエリの仕組みによる制限です。 +- `useStaticQuery` はファイル内で単一での使用のみをサポートしています。これは Gatsby の現状のクエリーの仕組みによる制限です。 From 89a27c798e1ae3c57e9f98678487704f81fc25ec Mon Sep 17 00:00:00 2001 From: nakajmg Date: Sat, 18 Jan 2020 16:30:07 +0900 Subject: [PATCH 7/9] add missing translation --- docs/docs/use-static-query.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/use-static-query.md b/docs/docs/use-static-query.md index ccee33a57..88868fed4 100644 --- a/docs/docs/use-static-query.md +++ b/docs/docs/use-static-query.md @@ -4,7 +4,7 @@ title: useStaticQuery フックを使ったコンポーネントからのクエ Gatsby v2.1.0 で `useStaticQuery` が導入されました。これはビルド時に [React Hook](https://reactjs.org/docs/hooks-intro.html) を使って GraphQL のクエリーを実行する新しい機能です。 -React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリーを介したデータの取得とコンポーネントへの注入を行えます。 +React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリーを介したデータの取得とコンポーネントへの注入を行えます。ただし、 `useStaticQuery` はレンダープロップを受け取るコンポーネントではなく、フックです。 このガイドでは、 `useStaticQuery` を使った例を紹介します。もし Gatsby の StaticQuery について詳しくなければ、まずは [StaticQuery とページクエリーの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 From b2aa678e3f567f3e79f8a1f1587314b7c1b771db Mon Sep 17 00:00:00 2001 From: nakajmg Date: Sat, 18 Jan 2020 16:30:53 +0900 Subject: [PATCH 8/9] use code block --- docs/docs/use-static-query.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/use-static-query.md b/docs/docs/use-static-query.md index 88868fed4..c2f67ea20 100644 --- a/docs/docs/use-static-query.md +++ b/docs/docs/use-static-query.md @@ -6,7 +6,7 @@ Gatsby v2.1.0 で `useStaticQuery` が導入されました。これはビルド React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリーを介したデータの取得とコンポーネントへの注入を行えます。ただし、 `useStaticQuery` はレンダープロップを受け取るコンポーネントではなく、フックです。 -このガイドでは、 `useStaticQuery` を使った例を紹介します。もし Gatsby の StaticQuery について詳しくなければ、まずは [StaticQuery とページクエリーの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 +このガイドでは、 `useStaticQuery` を使った例を紹介します。もし Gatsby の `StaticQuery` について詳しくなければ、まずは [StaticQuery とページクエリーの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。 ## コンポーネントでの useStaticQuery の使い方 From d127c6def14d6e896de69296e2f38266677cfb6c Mon Sep 17 00:00:00 2001 From: nakajmg Date: Mon, 20 Jan 2020 09:55:48 +0900 Subject: [PATCH 9/9] Update docs/docs/use-static-query.md Co-Authored-By: Hirotaka Mizutani --- docs/docs/use-static-query.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/use-static-query.md b/docs/docs/use-static-query.md index c2f67ea20..663b57019 100644 --- a/docs/docs/use-static-query.md +++ b/docs/docs/use-static-query.md @@ -4,7 +4,7 @@ title: useStaticQuery フックを使ったコンポーネントからのクエ Gatsby v2.1.0 で `useStaticQuery` が導入されました。これはビルド時に [React Hook](https://reactjs.org/docs/hooks-intro.html) を使って GraphQL のクエリーを実行する新しい機能です。 -React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリーを介したデータの取得とコンポーネントへの注入を行えます。ただし、 `useStaticQuery` はレンダープロップを受け取るコンポーネントではなく、フックです。 +React コンポーネントで、 [StaticQuery](/docs/static-query/) コンポーネントと同じように GraphQL クエリーを介したデータの取得とコンポーネントへの注入を行えます。ただし、`useStaticQuery` はコンポーネントがレンダープロップを取り込むというよりも、フックによって行います。 このガイドでは、 `useStaticQuery` を使った例を紹介します。もし Gatsby の `StaticQuery` について詳しくなければ、まずは [StaticQuery とページクエリーの違い](/docs/static-query/#how-staticquery-differs-from-page-query)をご覧ください。