Skip to content

Commit

Permalink
StrawberryShake documentation fixes (#6742)
Browse files Browse the repository at this point in the history
  • Loading branch information
glen-84 authored and michaelstaib committed Dec 11, 2023
1 parent 72d1cba commit e9b59e0
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 43 deletions.
4 changes: 2 additions & 2 deletions website/src/docs/strawberryshake/v12/get-started/console.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ In this tutorial, we will teach you:

## Step 1: Add the Strawberry Shake CLI tools

The Strawberry Shake tool will help you to setup your project to create a GraphQL client.
The Strawberry Shake tool will help you to set up your project to create a GraphQL client.

Open your preferred terminal and select a directory where you want to add the code of this tutorial.

Expand Down Expand Up @@ -85,7 +85,7 @@ dotnet add Demo package Microsoft.Extensions.Http

## Step 4: Add a GraphQL client to your project using the CLI tools

To add a client to your project, you need to run the `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.
To add a client to your project, you need to run `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.

In this tutorial we will use our GraphQL workshop to create a list of sessions that we will add to our console application.

Expand Down
24 changes: 12 additions & 12 deletions website/src/docs/strawberryshake/v12/get-started/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ In this tutorial, we will teach you:

# Step 1: Add the Strawberry Shake CLI tools

The Strawberry Shake tool will help you to setup your project to create a GraphQL client.
The Strawberry Shake tool will help you to set up your project to create a GraphQL client.

Open your preferred terminal and select a directory where you want to add the code of this tutorial.

Expand Down Expand Up @@ -84,7 +84,7 @@ dotnet add Demo package Microsoft.Extensions.Http

# Step 4: Add a GraphQL client to your project using the CLI tools

To add a client to your project, you need to run the `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.
To add a client to your project, you need to run `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.

In this tutorial we will use our GraphQL workshop to create a list of sessions that we will add to our Blazor application.

Expand Down Expand Up @@ -178,7 +178,7 @@ public class Program
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Demo
@using Demo.Shared
@using Demo.Shared // (from .NET 8, `Demo.Layout`)
@using Demo.GraphQL
@using StrawberryShake
```
Expand All @@ -187,7 +187,7 @@ public class Program

In this section we will perform a simple fetch with our `ConferenceClient`. We will not yet look at state or other things that come with our client but just perform a simple fetch.

1. Head over to `Pages/Index.razor`.
1. Head over to `Pages/Index.razor` (from .NET 8, `Home.razor`).

2. Add inject the `ConferenceClient` beneath the `@pages` directive.

Expand All @@ -213,7 +213,7 @@ Welcome to your new app.
}
```

4. Now lets fetch the titles with our client.
4. Now let's fetch the titles with our client.

```csharp
@page "/"
Expand All @@ -236,7 +236,7 @@ Welcome to your new app.
}
```

5. Last, lets render the titles on our page as a list.
5. Last, let's render the titles on our page as a list.

```csharp
@page "/"
Expand Down Expand Up @@ -271,7 +271,7 @@ Welcome to your new app.

# Step 6: Using the built-in store with reactive APIs.

The simple fetch of our data works. But every time we visit the index page it will fetch the data again although the data does not change often. Strawberry Shake also comes with state management where you can control the entity store and update it when you need to. In order to best interact with the store we will use `System.Reactive` from Microsoft. Lets get started :)
The simple fetch of our data works. But every time we visit the index page it will fetch the data again although the data does not change often. Strawberry Shake also comes with state management where you can control the entity store and update it when you need to. In order to best interact with the store we will use `System.Reactive` from Microsoft. Let's get started :)

1. Install the package `System.Reactive`.

Expand All @@ -294,12 +294,12 @@ dotnet add Demo package System.Reactive
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Demo
@using Demo.Shared
@using Demo.Shared // (from .NET 8, `Demo.Layout`)
@using Demo.GraphQL
@using StrawberryShake
```

3. Head back to `Pages/Index.razor` and replace the code section with the following code:
3. Head back to `Pages/Index.razor` (from .NET 8, `Home.razor`) and replace the code section with the following code:

```csharp
private string[] titles = Array.Empty<string>();
Expand Down Expand Up @@ -410,7 +410,7 @@ fragment SessionInfo on Session {
}
```

2. Next we need to restructure the `Index.razor` page. We will get rid of the Blazor default content and rework our list to use our fragment `SessionInfo`. Further, we will introduce a button to our list so that we have a hook to start editing items from our list.
2. Next we need to restructure the `Index.razor` (from .NET 8, `Home.razor`) page. We will get rid of the Blazor default content and rework our list to use our fragment `SessionInfo`. Further, we will introduce a button to our list so that we have a hook to start editing items from our list.

```csharp
@page "/"
Expand Down Expand Up @@ -471,7 +471,7 @@ mutation RenameSession($sessionId: ID!, $title: String!) {

4. Rebuild, the project so that the source generator will create all our new types.

5. Go back to the `Index.razor` page and lets add some state for our edit controls.
5. Go back to the `Index.razor` (from .NET 8, `Home.razor`) page and let's add some state for our edit controls.

```csharp
private ISessionInfo selectedSession;
Expand Down Expand Up @@ -527,7 +527,7 @@ The page should now look like the following:
}
```

6. Now, lets put some controls in to let the user edit the title of one of our sessions.
6. Now, let's put some controls in to let the user edit the title of one of our sessions.

```csharp
@if (selectedSession is not null)
Expand Down
20 changes: 10 additions & 10 deletions website/src/docs/strawberryshake/v12/get-started/xamarin.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ In this tutorial, we will teach you:

## Step 1: Add the Strawberry Shake CLI tools

The Strawberry Shake tool will help you to setup your project to create a GraphQL client.
The Strawberry Shake tool will help you to set up your project to create a GraphQL client.

Open your preferred terminal and select a directory where you want to add the code of this tutorial.

Expand Down Expand Up @@ -84,7 +84,7 @@ dotnet add Demo package Microsoft.Extensions.Http

## Step 4: Add a GraphQL client to your project using the CLI tools

To add a client to your project, you need to run the `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.
To add a client to your project, you need to run `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.

In this tutorial we will use our GraphQL workshop to create a list of sessions that we will add to our Blazor application.

Expand Down Expand Up @@ -178,15 +178,15 @@ public class Program
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Demo
@using Demo.Shared
@using Demo.Shared // (from .NET 8, `Demo.Layout`)
@using Demo.GraphQL
```

## Step 5: Use the ConferenceClient to perform a simple fetch

In this section we will perform a simple fetch with our `ConferenceClient`. We will not yet look at state or other things that come with our client but just perform a simple fetch.

1. Head over to `Pages/Index.razor`.
1. Head over to `Pages/Index.razor` (from .NET 8, `Home.razor`).

2. Add inject the `ConferenceClient` beneath the `@pages` directive.

Expand All @@ -208,7 +208,7 @@ Welcome to your new app.
@code { }
```

4. Now lets fetch the titles with our client.
4. Now let's fetch the titles with our client.

```html
@page "/" @inject ConferenceClient ConferenceClient;
Expand All @@ -229,7 +229,7 @@ Welcome to your new app.
>
```

5. Last, lets render the titles on our page as a list.
5. Last, let's render the titles on our page as a list.

```html
@page "/" @inject ConferenceClient ConferenceClient;
Expand Down Expand Up @@ -262,7 +262,7 @@ Welcome to your new app.

## Step 6: Using the built-in store with reactive APIs.

The simple fetch of our data works. But every time we visit the index page it will fetch the data again although the data does not change often. Strawberry Shake also comes with state management where you can control the entity store and update it when you need to. In order to best interact with the store we will use `System.Reactive` from Microsoft. Lets get started :)
The simple fetch of our data works. But every time we visit the index page it will fetch the data again although the data does not change often. Strawberry Shake also comes with state management where you can control the entity store and update it when you need to. In order to best interact with the store we will use `System.Reactive` from Microsoft. Let's get started :)

1. Install the package `System.Reactive`.

Expand All @@ -285,12 +285,12 @@ dotnet add Demo package System.Reactive
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Demo
@using Demo.Shared
@using Demo.Shared // (from .NET 8, `Demo.Layout`)
@using Demo.GraphQL
@using StrawberryShake
```

3. Head back to `Pages/Index.razor` and replace the code section with the following code:
3. Head back to `Pages/Index.razor` (from .NET 8, `Home.razor`) and replace the code section with the following code:

```csharp
private string[] titles = Array.Empty<string>();
Expand Down Expand Up @@ -401,4 +401,4 @@ fragment SessionInfo on Session {
}
```

2. Next we need to restructure the `Index.razor` page.
2. Next we need to restructure the `Index.razor` (from .NET 8, `Home.razor`) page.
4 changes: 2 additions & 2 deletions website/src/docs/strawberryshake/v13/get-started/console.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ In this tutorial, we will teach you:

## Step 1: Add the Strawberry Shake CLI tools

The Strawberry Shake tool will help you to setup your project to create a GraphQL client.
The Strawberry Shake tool will help you to set up your project to create a GraphQL client.

Open your preferred terminal and select a directory where you want to add the code of this tutorial.

Expand Down Expand Up @@ -65,7 +65,7 @@ dotnet add Demo package StrawberryShake.Server

## Step 4: Add a GraphQL client to your project using the CLI tools

To add a client to your project, you need to run the `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.
To add a client to your project, you need to run `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.

In this tutorial we will use our GraphQL workshop to create a list of sessions that we will add to our console application.

Expand Down
14 changes: 7 additions & 7 deletions website/src/docs/strawberryshake/v13/get-started/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ In this tutorial, we will teach you:

# Step 1: Add the Strawberry Shake CLI tools

The Strawberry Shake tool will help you to setup your project to create a GraphQL client.
The Strawberry Shake tool will help you to set up your project to create a GraphQL client.

Open your preferred terminal and select a directory where you want to add the code of this tutorial.

Expand Down Expand Up @@ -66,7 +66,7 @@ dotnet add Demo package StrawberryShake.Blazor

# Step 4: Add a GraphQL client to your project using the CLI tools

To add a client to your project, you need to run the `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.
To add a client to your project, you need to run `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.

In this tutorial we will use our ChilliCream demo project to create a list of crypto currencies that we will add to our Blazor application.

Expand Down Expand Up @@ -173,17 +173,17 @@ await builder.Build().RunAsync();
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Demo
@using Demo.Shared
@using Demo.Shared // (from .NET 8, `Demo.Layout`)
@using Demo.GraphQL
@using Demo.GraphQL.Components
@using StrawberryShake
```

# Step 5: Use the generated Razor component to display the data.

In this section we will integrated the Razor component and print a simple list on our index page to display the crypto currencies.
In this section we will integrate the Razor component and print a simple list on our index page to display the crypto currencies.

1. Head over to `Pages/Index.razor`.
1. Head over to `Pages/Index.razor` (from .NET 8, `Home.razor`).

2. Remove everything from your page but the `@page "/"`

Expand Down Expand Up @@ -212,7 +212,7 @@ In this section we will integrated the Razor component and print a simple list o

> The query component allows you to handle the loading and the error state when fetching data. Both states can be handled but do not have to be.

4. With that done lets render the actual content.
4. With that done let's render the actual content.

```csharp
@page "/"
Expand Down Expand Up @@ -240,4 +240,4 @@ In this section we will integrated the Razor component and print a simple list o

![Started Blazor application in Microsoft Edge](../../../shared/berry_asset_list.png)

Awesome you have created your first application with Blazor and GraphQL.
Awesome! You have created your first application with Blazor and GraphQL.
20 changes: 10 additions & 10 deletions website/src/docs/strawberryshake/v13/get-started/xamarin.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ In this tutorial, we will teach you:

## Step 1: Add the Strawberry Shake CLI tools

The Strawberry Shake tool will help you to setup your project to create a GraphQL client.
The Strawberry Shake tool will help you to set up your project to create a GraphQL client.

Open your preferred terminal and select a directory where you want to add the code of this tutorial.

Expand Down Expand Up @@ -84,7 +84,7 @@ dotnet add Demo package Microsoft.Extensions.Http

## Step 4: Add a GraphQL client to your project using the CLI tools

To add a client to your project, you need to run the `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.
To add a client to your project, you need to run `dotnet graphql init {{ServerUrl}} -n {{ClientName}}`.

In this tutorial we will use our GraphQL workshop to create a list of sessions that we will add to our Blazor application.

Expand Down Expand Up @@ -178,15 +178,15 @@ public class Program
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Demo
@using Demo.Shared
@using Demo.Shared // (from .NET 8, `Demo.Layout`)
@using Demo.GraphQL
```

## Step 5: Use the ConferenceClient to perform a simple fetch

In this section we will perform a simple fetch with our `ConferenceClient`. We will not yet look at state or other things that come with our client but just perform a simple fetch.

1. Head over to `Pages/Index.razor`.
1. Head over to `Pages/Index.razor` (from .NET 8, `Home.razor`).

2. Add inject the `ConferenceClient` beneath the `@pages` directive.

Expand All @@ -208,7 +208,7 @@ Welcome to your new app.
@code { }
```

4. Now lets fetch the titles with our client.
4. Now let's fetch the titles with our client.

```html
@page "/" @inject ConferenceClient ConferenceClient;
Expand All @@ -229,7 +229,7 @@ Welcome to your new app.
>
```

5. Last, lets render the titles on our page as a list.
5. Last, let's render the titles on our page as a list.

```html
@page "/" @inject ConferenceClient ConferenceClient;
Expand Down Expand Up @@ -262,7 +262,7 @@ Welcome to your new app.

## Step 6: Using the built-in store with reactive APIs.

The simple fetch of our data works. But every time we visit the index page it will fetch the data again although the data does not change often. Strawberry Shake also comes with state management where you can control the entity store and update it when you need to. In order to best interact with the store we will use `System.Reactive` from Microsoft. Lets get started :)
The simple fetch of our data works. But every time we visit the index page it will fetch the data again although the data does not change often. Strawberry Shake also comes with state management where you can control the entity store and update it when you need to. In order to best interact with the store we will use `System.Reactive` from Microsoft. Let's get started :)

1. Install the package `System.Reactive`.

Expand All @@ -285,12 +285,12 @@ dotnet add Demo package System.Reactive
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Demo
@using Demo.Shared
@using Demo.Shared // (from .NET 8, `Demo.Layout`)
@using Demo.GraphQL
@using StrawberryShake
```

3. Head back to `Pages/Index.razor` and replace the code section with the following code:
3. Head back to `Pages/Index.razor` (from .NET 8, `Home.razor`) and replace the code section with the following code:

```csharp
private string[] titles = Array.Empty<string>();
Expand Down Expand Up @@ -401,4 +401,4 @@ fragment SessionInfo on Session {
}
```

2. Next we need to restructure the `Index.razor` page.
2. Next we need to restructure the `Index.razor` (from .NET 8, `Home.razor`) page.

0 comments on commit e9b59e0

Please sign in to comment.