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

update basic tutorial screenshots #2856

Merged
merged 1 commit into from
Jun 10, 2023
Merged
Show file tree
Hide file tree
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions website/src/pages/tutorial/basic/02-getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ These are our type definitions that describe what data can be retrieved from the

Up next you define the corresponding resolver functions that are used for resolving the data.

```ts
```ts filename="src/schema.ts"
const typeDefinitions = /* GraphQL */ `
type Query {
hello: String!
Expand All @@ -83,7 +83,7 @@ The typename (`Query`) is an object in which the fields (`hello`) are functions

Now you still need to glue together the type definitions and the resolver map.

```ts
```ts filename="src/schema.ts"
import { makeExecutableSchema } from '@graphql-tools/schema'

const typeDefinitions = /* GraphQL */ `
Expand Down
4 changes: 2 additions & 2 deletions website/src/pages/tutorial/basic/06-adding-a-database.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ Let's break down what's going on here with the numbered comments:
Take a moment to re-type the query line and notice the helpful autocompletion you get after typing `prisma.` and `prisma.link.` which lets us see all the possible models we can
access and operations we can use to query that data:

![typing prisma. and prisma.link.](https://i.imgur.com/Zrrqwmo.png)
![typing prisma. and prisma.link.](/assets/tutorial/basic/06-adding-a-database/prisma-autocomplete-query.png)

So now let's see things in action.

Expand All @@ -200,7 +200,7 @@ const newLink = await prisma.link.create({
})
```

![You successfully queried the database with Prisma Client](https://i.imgur.com/AUAtnxZ.png)
![You successfully queried the database with Prisma Client](/assets/tutorial/basic/06-adding-a-database/prisma-autocomplete-mutation.png)

Great! Re-run the previous command and this time you should now see your newly created link print in the terminal output! Much more satisfying ✨

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Now, you'll need to import the `createContext` function and make sure you add it
<details>
<summary>v2</summary>

```typescript
```typescript filename="src/main.ts"
import { createServer } from '@graphql-yoga/node'
import { schema } from './schema'
import { createContext } from './context'
Expand All @@ -57,7 +57,7 @@ main()
<details open>
<summary>v3</summary>

```typescript
```typescript filename="src/main.ts"
import { createYoga } from 'graphql-yoga'
import { createServer } from 'http'
import { schema } from './schema'
Expand Down Expand Up @@ -164,7 +164,7 @@ Now let's understand how these new resolvers are working!

The `feed` resolver is implemented as follows:

```ts
```ts filename="src/schema.ts"
const resolvers = {
Query: {
// ...
Expand All @@ -184,7 +184,7 @@ Now, you should be able to imagine the complete system and workflow of a Prisma/

The `postLink` resolver now looks like this:

```ts
```ts filename="src/schema.ts"
const resolvers = {
Mutation: {
async postLink(
Expand Down
8 changes: 4 additions & 4 deletions website/src/pages/tutorial/basic/08-graph-relations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ This is the skeleton of your new field resolver. As you might notice, it looks a

Add the following business logic within the resolver, that uses the newly generated Prisma functions:

```ts
```ts filename="src/schema.ts"
const resolvers = {
// ... other resolver maps ...
Mutation: {
Expand Down Expand Up @@ -237,7 +237,7 @@ Instead, you will first create a resolver for retrieving a comment via its id.

Within the `Query` object type resolver map create a new `comment` field resolver function.

```ts
```ts filename="src/schema.ts"
const resolvers = {
// ... other resolver maps ...
Query: {
Expand All @@ -256,7 +256,7 @@ Within the resolver, you want to fetch the comment by its id.

Add the corresponding logic for retrieving a comment by its id.

```ts
```ts filename="src/schema.ts"
const resolvers = {
// ... other resolver maps ...
Query: {
Expand Down Expand Up @@ -351,7 +351,7 @@ Up next, you implement the corresponding `Link.comments` resolver. For this, you

Add the following `Link.resolvers` implementation:

```ts
```ts filename="src/schema.ts"
const resolvers = {
// ... other resolver maps ...
Link: {
Expand Down
6 changes: 3 additions & 3 deletions website/src/pages/tutorial/basic/09-error-handling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ In this chapter, you will learn the origin of this error and learn how to proper

This is the resolver implementation that caused the issue when using a `linkId` that has no counter-part within the database.

```ts
```ts filename="src/schema.ts"
const resolvers = {
// ... other resolver maps ...
Mutation: {
Expand Down Expand Up @@ -132,7 +132,7 @@ For doing so you will use the `GraphQLYogaError` class that is exported from the

Add the following catch handler for mapping a foreign key error into a `GraphQLYogaError`:

```ts
```ts filename="src/schema.ts"
// ... other imports ...
import { GraphQLYogaError } from '@graphql-yoga/node'
// ... other imports ...
Expand Down Expand Up @@ -185,7 +185,7 @@ For doing so you will use the `GraphQLError` class that is exported from the `gr

Add the following catch handler for mapping a foreign key error into a `GraphQLError`:

```ts
```ts filename="src/schema.ts"
// ... other imports ...
import { GraphQLError } from 'graphql'
// ... other imports ...
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Next, you need to update the implementation of the `Query.feed` resolver functio

Now, update the `Query.feed` resolver function to look as follows:

```ts
```ts filename="src/schema.ts"
const resolvers = {
// ... other resolver maps ...
Query: {
Expand Down Expand Up @@ -123,7 +123,7 @@ Now, adjust the field resolver function implementation:

And now adjust the implementation of the `Query.feed` resolver function:

```ts
```ts filename="src/schema.ts"
const resolvers = {
// ... other resolvers maps ...
Query: {
Expand Down Expand Up @@ -185,7 +185,7 @@ Adjust the current schema resolver implementation according to the following.
<details>
<summary>v2</summary>

```ts
```ts filename="src/schema.ts"
import { GraphQLYogaError } from '@graphql-yoga/node'
// ... other code ...

Expand Down Expand Up @@ -241,7 +241,7 @@ const resolvers = {
<details open>
<summary>v3</summary>

```ts
```ts filename="src/schema.ts"
// ... other code ...
import { GraphQLError } from 'graphql'

Expand Down