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

chore(website): formatting fixes #2 #1096

Merged
merged 22 commits into from
Jun 25, 2020
Merged
Show file tree
Hide file tree
Changes from 19 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
41 changes: 20 additions & 21 deletions website/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const config = {
redirects: [],
header: {
logoLink: 'https://www.nexusjs.org', // replace with nexus site
title: 'GraphQL Nexus',
title: 'Nexus',
// check all links
// links: [
// { name: 'Docs', link: 'https://www.nexusjs.org/docs' },
Expand All @@ -28,20 +28,20 @@ const config = {
},
},
siteMetadata: {
title: 'GraphQL Nexus - title',
description: 'GraphQL Nexus - desc',
title: 'Nexus - title',
description: 'Nexus - desc',
keywords: 'Docs, nexus, 1.0',
docsLocation: 'https://github.com/graphql-nexus/nexus/tree/master/website/content',
twitter: {
site: '@nexus',
creator: '@nexus',
site: '@nexusgql',
creator: '@nexusgql',
image: '/social/docs-social.png',
},
og: {
site_name: 'GraphQL Nexus',
site_name: 'Nexus',
type: 'website',
image: {
alt: 'GraphQL Nexus',
alt: 'Nexus',
height: '630',
type: 'image/png',
url: '/social/docs-social.png', //replace social image
Expand All @@ -57,7 +57,7 @@ const config = {
},
footer: {
logoLink: '/',
title: 'Prisma',
title: 'Nexus',
products: [
{
name: 'Prisma Client',
Expand All @@ -69,12 +69,9 @@ const config = {
// { name: 'Prisma Enterprise', link: '/' },
],
community: [
{ name: 'Meet the community', link: 'https://www.prisma.io/community' },
{ name: 'Slack', link: 'https://slack.prisma.io/' },
{ name: 'Github', link: 'https://github.com/prisma' },
{ name: 'Discussions', link: 'https://github.com/prisma/prisma/discussions' },
{ name: 'GitHub', link: 'https://github.com/graphql-nexus' },
{ name: 'GitHub Discussions', link: 'https://github.com/graphql-nexus/nexus/discussions' },
{ name: 'GraphQL Meetup', link: 'https://www.meetup.com/graphql-berlin/' },
{ name: 'TypeScript Meetup', link: 'https://www.meetup.com/TypeScript-Berlin/' },
],
resources: [
{ name: 'Docs', link: '/' },
Expand All @@ -90,6 +87,7 @@ const config = {
{ name: 'How to GraphQL', link: 'https://www.howtographql.com/' },
{ name: 'PostgreSQL Tutorial', link: 'https://www.prisma.io/tutorials/?tag=postgresql' },
],
/* start NOT USED */
company: [
{ name: 'About', link: 'https://www.prisma.io/about' },
{ name: 'Jobs', link: 'https://www.prisma.io/jobs' },
Expand All @@ -99,15 +97,16 @@ const config = {
link: 'https://gist.github.com/nikolasburk/c0f34b0cc50d3403e2e0d40c0e6510aa',
},
],
newsletter: {
text: 'Stay up to date with the latest features and changes to Prisma',
},
/* end NOT USED */
findus: {
twitterLink: 'https://twitter.com/prisma',
youtubeLink: 'https://www.youtube.com/channel/UCptAHlN1gdwD89tFM3ENb6w',
fbLink: 'https://www.facebook.com/prisma.io',
slackLink: 'https://slack.prisma.io/',
gitLink: 'https://github.com/prisma',
twitterLink: 'https://twitter.com/nexusgql',
gitLink: 'https://github.com/graphql-nexus/',
slackLink: '',
fbLink: '',
youtubeLink: '',
},
newsletter: {
text: '',
},
},
}
Expand Down
50 changes: 0 additions & 50 deletions website/content/00-example.mdx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Welcome to _the_ Nexus tutorial! If you're new to Nexus and want a guided learni

This tutorial is still under construction. Some chapters will continue to be refined and more added. If you're looking for our old tutorial content, it can still be found [here](/getting-started/tutorial).

## Assumed Tools
## Assumed tools

Throughout this journey, we'll be making a few minor assumptions about your toolchain to keep the content flowing:

Expand All @@ -22,34 +22,34 @@ If you're using another set of tools, like Yarn on Windows with Sublime Text, th

There's a few conventions used throughout this tutorial that you should know about.

- **Annotated Code Blocks**
### Annotated code blocks

Most Code Blocks are explained with annotations. Take the following for example. Immediately following the codeblock are numbered points. Each corresponds to a line annotated with that number in the code block.
Most Code Blocks are explained with annotations. Take the following for example. Immediately following the codeblock are numbered points. Each corresponds to a line annotated with that number in the code block.

<!-- prettier-ignore -->
```ts
const a = 1 as const // 1
<!-- prettier-ignore -->
```ts
const a = 1 as const // 1

interface A {} // 2
interface A {} // 2
interface A {} // 2
interface A {} // 2

const b: any = 1 // 3
```
const b: any = 1 // 3
```

1. Use `as const` to make TS take the narrowest inference. Here `1` vs `number`.
2. Same-named interfaces will merge into one.
3. Use `any` to effectively disable type-checking
1. Use `as const` to make TS take the narrowest inference. Here `1` vs `number`.
2. Same-named interfaces will merge into one.
3. Use `any` to effectively disable type-checking

- **Auxiliary Content**
### Auxiliary content

Sometimes content that isn't core to the current flow but related to it will be mentioned. That looks like so:
Sometimes content that isn't core to the current flow but related to it will be mentioned. That looks like so:

> Hello there, have a nice day!
> Hello there, have a nice day!

## Copy-Pasting
### Copy-pasting

As you progress you'll be writing code, of course. Often you'll have the chance to copy and paste our code, but we strongly suggest if you're just starting out to **write the code yourself**. This will expose you to _experience_ of writing a Nexus app. Things like autocompletion and letting static safety guide your implementations, e.g. inside a GraphQL resolver. Also if you're new to TypeScript getting used to encountering, understanding, and fixing static type errors is essential practice. That said at no time should you feel _frustrated_. If things just aren't working, copy-paste our work as needed. Then, once things _are_ working, taking a moment muck around, break things, fix them again, etc. is almost always time well spent.

## Wrapping Up
## Wrapping up

Thanks for checking out Nexus, we hope you're as excited<br/>to learn about it as we are to show it to you! :rocket:
Thanks for checking out Nexus, we hope you're as excited to learn about it as we are to show it to you! 🚀
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ In this first chapter we're just going to get the bare minimum of a Nexus projec

Start by creating your project directory, initializing your `package.json`, and adding the `nexus` dependency.

```bash
```bash-symbol
mkdir nexus-tutorial && cd nexus-tutorial
npm init -y
npm add nexus
```

Nexus comes out of the box with a CLI. You'll use it often while working on your app. While you can access the CLI of your local nexus via `yarn` or npm scripts or `npx` but there's an even easier way. Install `nexus` globally. Then you can access the CLI from anywhere. Nexus is smart enough to delegate all invocations to the _local_ nexus. This is the idiomatic way to work with Nexus, but you aren't forced to do this.

```markdown
```bash-symbol
npm add --global nexus
```

Expand All @@ -43,37 +43,37 @@ Despite having the global Nexus CLI, using package scripts can be a handy way of
}
```

## Conventional Entrypoint
## Conventional entrypoint

We'll now create our first module at `api/app.ts`:

```bash
```bash-symbol
mkdir api && touch api/app.ts
```

The directory name `api` is arbitrary but the module name `app` has special meaning. Nexus will find `app.ts` wherever you put it within your project and treat it as your entrypoint. Furthermore, every module that imports `nexus` will be automatically included into the final build by Nexus. This makes growing and refactoring your project easy as you are freed from managing import/export tedium. You might be wondering how import order is managed. The answer is that Nexus' APIs are declarative and so designed to be order independent.

## Contextual Feedback
## Contextual feedback

Ok, with our entrypoint setup, let's boot up dev mode and see what happens.

```bash
```bash-symbol
nexus dev
```

Woops? You should be seeing a warning from Nexus:

```bash
```bash-symbol
▲ nexus:schema Your GraphQL schema is empty. [...]
```

All good, you indeed haven't added any types to your GraphQL schema yet so Nexus is right here. This is the first example of Nexus' rich development mode contextual feedback. One of the goals of Nexus is to never leave you in a confused disoriented state. If Nexus can give you in inline feedback it should. Add rich jsDoc and precise TypeScript types into the mix, and ideally you can largely avoid getting lost and _needing_ to consult the Nexus website, community, so on.

## Try It Out
## Try it out

Aside from the warning, you should also see a message indicating that your server is running, and where.

```bash
```bash-symbol
● nexus:server listening -- url: 'http://localhost:4000/'
```

Expand All @@ -85,10 +85,10 @@ This is a graphical user interface for interacting with GraphQL APIs. If you pre

Take a look at the right-hand side SCHEMA tab. There you'll see a default schema that Nexus has provided for you. This, along with the warning you say before, will go away once you begin your own schema.

## Wrapping Up
## Wrapping up

That's it! In the next chapter you'll begin working on your app's schema.

<div class="NextIs NextChapter"></div>

[➳](/tutorial/chapter-2-writing-your-first-schema)
<ButtonLink color="dark" type="primary" href="/tutorial/chapter-2-writing-your-first-schema">
Next &rarr;
</ButtonLink>
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,16 @@ In this chapter you're going to write your first schema. You'll learn about:
- GraphQL SDL file generation
- Enhanced type safety & autocompletion

<div class="NextIs SectionDivider"></div>

## What About That Server?
## What about that server?

In the last chapter you probably noticed the minimal setup required to get up and running. In fact, you might even be confused and wondering:

"Hey, all I have is an empty `app.ts` file, how can my server even be running?"
> "Hey, all I have is an empty `app.ts` file, how can my server even be running?"

Well, Nexus comes with a server out of the box. There's no need for you to start or stop the server or otherwise think about it beyond your domain logic. Nexus wants you to focus on what makes your GraphQL API unique.

If your lock-in fears are tingling, know that **you still have _full_ access** to the underlying server instance. So if you need to add custom middlewares, routes, and so on, you can. It happens that currently it is an `express` instance but this area of Nexus will evolve ([#295](https://github.com/graphql-nexus/nexus/issues/295)).

<div class="NextIs SectionDivider"></div>

## Reflection?

Before we get going we need a moment to introduce an important part of the Nexus development workflow. Nexus has an unconventional concept called "Reflection". It refers to the fact that, when `nexus dev` or `nexus build` is running, not only is your application code being run, but **information is being gathered and artifacts are being derived**. Some of Nexus' uses for reflection include:
Expand All @@ -39,19 +35,17 @@ Architecturally there's a lot more to say about reflection but for now, from a u

> There are plans to run Nexus Reflection as a separate process integrated into your IDE. You can learn more about and track the feature here ([#949](https://github.com/graphql-nexus/nexus/issues/949))

<div class="NextIs SectionDivider"></div>

## Model The Domain
## Model the domain

Let's get started with our blog schema by modeling some key entities in the domain. We'll begin with the concept of a `Post`. A post will represent a page in your blog. When not published, we'll call it a _draft_.

Your modeling work is going to start on the API layer as opposed to the database layer. This API-first approach can be a good way to collaborate with frontend teams, getting their input in shaping the data early.

> A note about terminology. We will be talking about the Post Object not Post Model. The difference is that at the API layer we have objects but at the database layer we have models. The name difference helps us talk about these different layers without confusion. It is also how GraphQL (API layer) and Prisma (database layer, discussed later) respectively refer to these things.
> A note about terminology. We will be talking about the _Post Object_, not the _Post Model_. The difference is that at the API layer we have objects but at the database layer we have models. The name difference helps us talk about these different layers without confusion. It is also how GraphQL (API layer) and Prisma (database layer, discussed later) respectively refer to these things.

Create a new module for your Post object at `api/graphql/Post.ts`. We _could_ write our whole schema within say `api/app.ts` or `api/graphql.ts`, but modularizing your GraphQL type definitions can help scale your codebase. Neither approach is inherently wrong though, so do as you see you fit. For this tutorial we'll use the modular style.

```bash
```bash-symbol
mkdir api/graphql && touch api/graphql/Post.ts
```

Expand Down Expand Up @@ -98,9 +92,7 @@ You are free to disable this file (settings discussed later) but its existence h

For the remainder of this tutorial we'll be keeping SDL to the right of Nexus code blocks.

<div class="NextIs SectionDivider"></div>

## Your First Home Grown Query
## Your first home-grown query

Your `Post` object is in place now but there's still no way for clients to read that data. Let's change that. You'll use the special `Query` object to expose your Post object.

Expand Down Expand Up @@ -228,4 +220,6 @@ Congratulations! You've successfully got your first GraphQL schema up and runnin

<div class="NextIs NextChapter"></div>

[➳](/tutorial/chapter-3-adding-mutations-to-your-api)
<ButtonLink color="dark" type="primary" href="/tutorial/chapter-3-adding-mutations-to-your-api">
Next &rarr;
</ButtonLink>
Loading