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

[Docs] Add ref docs links #767

Merged
merged 1 commit into from
Aug 6, 2021
Merged
Changes from all commits
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
Original file line number Diff line number Diff line change
@@ -10,17 +10,17 @@ Sitecore JSS, through the core JSS NPM package `sitecore-jss`, provides a simple

## Examples

The following sections provide some simplified examples to demonstrate how to use the JSS Dictionary API. If your project is based on a JSS sample application (you set it up with `jss create` or copied a sample from the [JSS repository](https://github.com/Sitecore/jss/tree/master/samples)), your application already handles fetching of dictionary data.
The following sections provide some simplified examples to demonstrate how to use the JSS Dictionary API. If your project is based on a JSS sample application (you set it up with `jss create` or copied a sample from the [JSS repository](https://github.com/Sitecore/jss/blob/release/18.0.0/samples)), your application already handles fetching of dictionary data.

The following examples show you how to retrieve dictionary data from your Sitecore instance using the REST and GraphQL.

> For all the examples below, we assume you will create the files in the root directory of the application and that you have a `config.js` file in that same directory. Adjust the `import` statements as necessary to reflect your project's setup.

### Fetching dictionary data with GraphQL

You can fetch dictionary data from Sitecore using GraphQL and the JSS `GraphQLDictionaryService`.
You can fetch dictionary data from Sitecore using GraphQL and the JSS [`GraphQLDictionaryService`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/modules/i18n_graphql_dictionary_service.md).

1. In a file `dictionary-service.ts`, create and configure an instance of the `GraphQLDictionaryService`:
1. In a file `dictionary-service.ts`, create and configure an instance of the [`GraphQLDictionaryService`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/classes/i18n_graphql_dictionary_service.GraphQLDictionaryService.md):

```javascript
import {GraphQLDictionaryService} from '@sitecore-jss/sitecore-jss';
@@ -50,9 +50,9 @@ dictionaryService.fetchDictionaryData(language).then(data => {

### Fetching dictionary data with REST

To invoke the REST Dictionary Service from a JSS application:
To invoke the REST Dictionary Service from a JSS application, use the JSS [`RestDictionaryService`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/modules/i18n_rest_dictionary_service.md):

1. In a file `dictionary-service.ts`, create an instance of the `RestDictionaryService` class and provide the configuration object:
1. In a file `dictionary-service.ts`, create an instance of the [`RestDictionaryService` class](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/classes/i18n_rest_dictionary_service.RestDictionaryService.md) and provide the configuration object:

```javascript
import { RestDictionaryService } from '@sitecore-jss/sitecore-jss';
@@ -76,7 +76,7 @@ dictionaryService.fetchDictionaryData(language).then(data => {

### Using a custom data fetcher

The `RestDictionaryServiceConfig` type accepts a `dataFetcher` property. You can use this property to pass a custom data fetcher to your instance of the Dictionary Service. By default, the JSS REST Dictionary service uses `axios`.
The [`RestDictionaryServiceConfig`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/modules/i18n_rest_dictionary_service.md#restdictionaryserviceconfig) type accepts a `dataFetcher` property. You can use this property to pass a custom data fetcher to your instance of the Dictionary Service. By default, the JSS REST Dictionary service uses [`axios`](https://www.npmjs.com/package/axios).

To use a REST dictionary service with a custom data fetcher:

@@ -118,19 +118,6 @@ dictionaryService.fetchDictionaryData(language).then(data => {

### Dictionary data

Assuming an app called "JssReactWeb", where you want to fetch dictionary data for Mexican Spanish, the JSS application receives the following dictionary data:

```json
{
"lang": "es-MX",
"app": "JssReactWeb",
"phrases": {
"Copyright": "{{year}} Inicio Bootstrap",
"Home": "Inicio",
"Start Bootstrap": "Inicio Bootstrap"
}
}
```
The method [`fetchDictionaryData`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/classes/i18n_dictionary_service.DictionaryServiceBase.md#fetchdictionarydata) returns a key-value pair map of [`dictionary phrases`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/interfaces/i18n_dictionary_service.DictionaryPhrases.md).

If you'd like to learn more about other translation techniques with JSS, see [Content Translation](/docs/techniques/content-translation).

Original file line number Diff line number Diff line change
@@ -16,9 +16,9 @@ The following examples show you how to retrieve layout data from your Sitecore i

## Fetching layout data with GraphQL

You can fetch layout data from Sitecore using GraphQL and the JSS `GraphQLLayoutService`.
You can fetch layout data from Sitecore using GraphQL and the JSS [`GraphQLLayoutService`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/modules/layout_graphql_layout_service.md).

1. In a file `layout-service.ts`, create and configure an instance of the `GraphQLLayoutService`:
1. In a file `layout-service.ts`, create and configure an instance of the [`GraphQLLayoutService`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/classes/layout_graphql_layout_service.GraphQLLayoutService.md) using :

```javascript
import {GraphQLLayoutService} from '@sitecore-jss/sitecore-jss';
@@ -41,13 +41,13 @@ layoutService.fetchLayoutData(language).then(data => {
});
```

> TIP: You can pass a `formatLayoutQuery` option to your GraphQLLayoutService instance to override the default query. See the [`GraphQLLayoutServiceConfig`](https://github.com/Sitecore/jss/blob/release/18.0.0/packages/sitecore-jss/src/layout/graphql-layout-service.ts) type for details.
> TIP: You can pass a `formatLayoutQuery` option to your GraphQLLayoutService instance to override the default query. See the [`GraphQLLayoutServiceConfig`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/classes/layout_graphql_layout_service.GraphQLLayoutService.md) type for details.

## Fetching layout data with REST

To invoke the REST Layout Service from a JSS application:
To invoke the REST Layout Service from a JSS application using the JSS [`RestLayoutService`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/modules/layout_rest_layout_service.md):

1. In a file `layout-service.ts`, create an instance of the `RestLayoutService` class and provide the configuration object:
1. In a file `layout-service.ts`, create an instance of the [`RestLayoutService` class](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/classes/layout_rest_layout_service.RestLayoutService.md) and provide the configuration object (of type [`RestLayoutServiceConfig`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/modules/layout_rest_layout_service.md#restlayoutserviceconfig)):

```javascript
import { RestLayoutService } from '@sitecore-jss/sitecore-jss';
@@ -75,11 +75,11 @@ layoutService.fetchLayoutData(sitecoreRoutePath, language).then(data => {

### Using a custom data fetcher

The `RestLayoutServiceConfig` type accepts a `dataFetcherResolver` property. You can use this property to pass a custom data fetcher to your instance of the Layout Service. By default, the JSS REST Layout service uses `axios`.
The [`RestLayoutServiceConfig`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/modules/layout_rest_layout_service.md#restlayoutserviceconfig) type accepts a `dataFetcherResolver` property. You can use this property to pass a custom data fetcher to your instance of the Layout Service. By default, the JSS REST Layout service uses [`axios`](https://www.npmjs.com/package/axios).

To use a REST layout service with a custom data fetcher:

1. In a file `layout-service.ts`, create an instance of the `RestLayoutService` class and provide the configuration object:
1. In a file `layout-service.ts`, create an instance of the [`RestLayoutService` class](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss/classes/layout_rest_layout_service.RestLayoutService.md) and provide the configuration object:

```typescript
import { AxiosResponse } from 'axios';
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ title: GraphQL Sitemap Service

# GraphQL Sitemap Service

The `GraphQLSitemapService` fetches the list of site pages using Sitecore's GraphQL API. We commonly use this service in conjuction with `getStaticPaths`. Next.js uses the list of pages to fetch data for Static Generation and Export functionality. See [getStaticPaths](/docs/nextjs/data-fetching/getStaticPaths).
The [`GraphQLSitemapService`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss-nextjs/modules/services_graphql_sitemap_service.md) fetches the list of site pages using Sitecore's GraphQL API. We commonly use this service in conjuction with `getStaticPaths`. Next.js uses the list of pages to fetch data for Static Generation and Export functionality. See [getStaticPaths](/docs/nextjs/data-fetching/getStaticPaths).

## Configuration

@@ -23,11 +23,11 @@ You also have the possibility to specify a `rootItemId`. The Sitemap Service nee

> WARNING: Not specifying the `rootItemId` for the GraphQL Sitemap Service instance can cause errors when using our Next.js SDK in conjuction with SXA integration.

The service exposes `fetchSSGSitemap` and `fetchExportSitemap`.
The service exposes [`fetchSSGSitemap`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss-nextjs/classes/services_graphql_sitemap_service.GraphQLSitemapService.md#fetchssgsitemap) and [`fetchExportSitemap`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss-nextjs/classes/services_graphql_sitemap_service.GraphQLSitemapService.md#fetchexportsitemap).

* For static export, `fetchExportSitemap`. As static export doesn't support multilingual apps, this function accepts one `language` and will only run GraphQL queries for that language.

* In SSG mode, use `fetchSSGSitemap`. This function accepts an array of supported `languages`. It will include the `locale` property because the sample application enables i18n by default. It will run GraphQL query for each language.
* For static generation, use `fetchSSGSitemap`. This function accepts an array of supported `languages`. It will include the `locale` property because the sample application enables i18n by default. It will run GraphQL query for each language.

When you execute `fetchSSGSitemap`/`fetchExportSitemap` using the `GraphQLSitemapService`, the service executes the following steps:

@@ -37,4 +37,4 @@ When you execute `fetchSSGSitemap`/`fetchExportSitemap` using the `GraphQLSitema

## Queries

The [default GraphQL query used by GraphQL Sitemap Service](https://github.com/Sitecore/jss/blob/release/18.0.0/packages/sitecore-jss-nextjs/src/services/graphql-sitemap-service.ts#L18-L49) to fetch items and generate the sitemap can be replaced with a custom query. To do so, extend the `GraphQLSitemapService` class, overriding the `fetchSitemap` method used internally by `fetchSSGSitemap` and `fetchExportSitemap`.
The [default GraphQL query used by GraphQL Sitemap Service](https://github.com/Sitecore/jss/blob/release/18.0.0/packages/sitecore-jss-nextjs/src/services/graphql-sitemap-service.ts#L18-L49) to fetch items and generate the sitemap can be replaced with a custom query. To do so, extend the `GraphQLSitemapService` class, overriding the [`fetchSitemap`](https://github.com/Sitecore/jss/blob/release/18.0.0/ref-docs/sitecore-jss-nextjs/classes/services_graphql_sitemap_service.GraphQLSitemapService.md#fetchsitemap) method used internally by `fetchSSGSitemap` and `fetchExportSitemap`.