GitBook: [master] 18 pages modified

Author: christianalfoni

README.md

@@ -33,9 +33,9 @@ Building your application with a single state tree is the most straight forward
 Separate 3rd party APIs and logic not specific to your application by using **effects**. This will keep your application logic pure and without low level APIs cluttering your code.
 
 {% tabs %}
-{% tab title="api.ts" %}
-```typescript
-export const fetchItems = async (): Promise<Item[]> {
+{% tab title="api.js" %}
+```javascript
+export const fetchItems = async () {
     const response = await fetch('/api/items')
 
     return response.json()
@@ -44,9 +44,9 @@ export const fetchItems = async (): Promise<Item[]> {
 ```
 {% endtab %}
 
-{% tab title="actions.ts" %}
+{% tab title="actions.js" %}
 ```typescript
-export const loadApp: AsyncAction = ({ state, effects }) => {
+export const loadApp = ({ state, effects }) => {
   state.items = await effects.api.fetchItems()
 }
 ```
@@ -57,8 +57,8 @@ export const loadApp: AsyncAction = ({ state, effects }) => {
 
 When you build applications that perform many state changes things can get out of hand. In Overmind you can only perform state changes from **actions** and all changes are tracked by the development tool.
 
-```typescript
-export const getItems: AsyncAction = async ({ state, effects }) => {
+```javascript
+export const getItems = async ({ state, effects }) => {
   state.isLoadingItems = true
   state.items = await effects.api.fetchItems()
   state.isLoadingItems = false
@@ -71,8 +71,8 @@ Even though Overmind can create applications with only plain **state** and **act
 
 {% tabs %}
 {% tab title="Operators" %}
-```typescript
-export const search: Operator<string> = pipe(
+```javascript
+export const search = pipe(
   mutate(({ state }, query) => {
     state.query = query
   }),
@@ -88,16 +88,8 @@ export const search: Operator<string> = pipe(
 {% endtab %}
 
 {% tab title="Statechart" %}
-```typescript
-const loginChart: Statechart<
-  typeof config,
-  {
-    LOGIN: void
-    AUTHENTICATING: void
-    AUTHENTICATED: void
-    ERROR: void
-  }
-> = {
+```javascript
+const loginChart = {
   initial: 'LOGIN',
   states: {
     LOGIN: {
@@ -129,15 +121,15 @@ const loginChart: Statechart<
 {% endtab %}
 
 {% tab title="Class state" %}
-```typescript
+```javascript
 class LoginForm() {
-  private username: string = ''
-  private password: string = ''
-  private validationError: string = ''
-  changeUsername(username: string) {
+  private username = ''
+  private password = ''
+  private validationError = ''
+  changeUsername(username) {
     this.username = username
   }
-  changePassword(password: string) {
+  changePassword(password) {
     if (!password.match([0-9]) {
       this.validationError = 'You need some numbers in your password'
     }
@@ -148,11 +140,7 @@ class LoginForm() {
   }
 }
 
-type State = {
-  loginForm: LoginForm
-}
-
-export const state: State = {
+export const state = {
   loginForm: new LoginForm()
 }
 ```
@@ -163,7 +151,7 @@ export const state: State = {
 
 Bring in your application configuration of state, effects and actions. Create mocks for any effects. Take a snapshot of mutations performed in an action to ensure all intermediate states are met.
 
-```typescript
+```javascript
 import { createOvermindMock } from 'overmind'
 import { config } from './'
 

SUMMARY.md

@@ -3,34 +3,35 @@
 * [Overmind](README.md)
 * [Introduction](introduction.md)
 * [Quickstart](quickstart.md)
+* [How to learn](how-to-learn.md)
 * [Videos](videos-1.md)
 * [FAQ](faq.md)
 
 ## Core
 
+* [Configuration](core/structuring-the-app.md)
 * [State](core/defining-state.md)
 * [Actions](core/writing-application-logic.md)
 * [Effects](core/running-side-effects.md)
 * [Operators](core/going-functional.md)
-* [Statecharts](features/statecharts.md)
+* [Statecharts](core/statecharts.md)
 * [Typescript](core/typescript.md)
 
 ## Addons
 
-* [React](view-layers/react.md)
-* [Angular](view-layers/angular.md)
-* [Vue](view-layers/vue.md)
-* [GraphQL](features/graphql.md)
+* [React](addons/react.md)
+* [Angular](addons/angular.md)
+* [Vue](addons/vue.md)
+* [GraphQL](addons/graphql.md)
 
 ## Guides <a id="guides-1"></a>
 
-* [Testing](guides-1/testing.md)
-* [Structuring the app](guides-1/structuring-the-app.md)
 * [Connecting components](guides-1/connecting-components.md)
 * [Managing lists](guides-1/managing-lists.md)
 * [State first routing](guides-1/state-first-routing.md)
-* [Server Side Rendering](features/server-side-rendering.md)
+* [Server Side Rendering](guides-1/server-side-rendering.md)
 * [Move to Typescript](guides-1/move-to-typescript.md)
+* [Testing](guides-1/testing.md)
 
 ## API <a id="api-1"></a>
 

features/graphql.md addons/graphql.mdfeatures/graphql.md renamed to addons/graphql.md

@@ -1,7 +1,5 @@
 # GraphQL
 
-
-
 Using Graphql with Overmind gives you the following benefits:
 
 * **Query:** The query for data is run with the rest of your application logic, unrelated to mounting components
@@ -25,7 +23,7 @@ npm install overmind-graphql
 The Graphql package is a _configuration factory_. That means you need some existing configuration before going:
 
 {% tabs %}
-{% tab title="overmind/index.ts" %}
+{% tab title="overmind/index.js" %}
 ```typescript
 import { state } from './state'
 
@@ -35,16 +33,10 @@ export const config = {
 ```
 {% endtab %}
 
-{% tab title="overmind/state.ts" %}
+{% tab title="overmind/state.js" %}
 ```typescript
-// We will talk about this one soon :)
-import { Post } from './graphql-types'
-
-type State = {
-  posts: Post[]
-}
 
-export const state: State = {
+export const state = {
   posts: []
 }
 ```
@@ -56,7 +48,7 @@ export const state: State = {
 Now let us introduce the factory:
 
 {% tabs %}
-{% tab title="overmind/index.ts" %}
+{% tab title="overmind/index.js" %}
 ```typescript
 import { graphql } from 'overmind-graphql'
 import * as queries from './queries'
@@ -73,12 +65,11 @@ export const config = graphql({
 ```
 {% endtab %}
 
-{% tab title="overmind/queries.ts" %}
+{% tab title="overmind/queries.js" %}
 ```typescript
-import { Query, gql } from 'overmind-graphql'
-import { Posts } from './graphql-types'
+import { gql } from 'overmind-graphql'
 
-export const posts: Query<Posts> = gql`
+export const posts = gql`
   query Posts {
     posts {
       id
@@ -89,12 +80,11 @@ export const posts: Query<Posts> = gql`
 ```
 {% endtab %}
 
-{% tab title="overmind/mutations.ts" %}
+{% tab title="overmind/mutations.js" %}
 ```typescript
-import { Query, gql } from 'overmind-graphql'
-import { CreatePost, CreatePostVariables } from './graphql-types'
+import { gql } from 'overmind-graphql'
 
-export const createPost: Query<CreatePost, CreatePostVariables> = gql`
+export const createPost = gql`
   mutation CreatePost($title: String!) {
     createPost(title: $title) {
       id
@@ -112,7 +102,7 @@ You define **queries** and **mutations** as part of the second argument to the f
 To call a query you will typically use an action. Let us create an action that uses our **posts** query.
 
 {% tabs %}
-{% tab title="overmind/index.ts" %}
+{% tab title="overmind/index.js" %}
 ```typescript
 import { graphql } from 'overmind-graphql'
 import * as actions from './actions'
@@ -131,11 +121,9 @@ export const config = graphql({
 ```
 {% endtab %}
 
-{% tab title="overmind/actions.ts" %}
+{% tab title="overmind/actions.js" %}
 ```typescript
-import { AsyncAction } from 'overmind'
-
-export const getPosts: AsyncAction = async ({ state, effects }) => {
+export const getPosts = async ({ state, effects }) => {
   const { posts } = await effects.queries.posts()
 
   state.posts = posts
@@ -149,17 +137,15 @@ export const getPosts: AsyncAction = async ({ state, effects }) => {
 Mutation queries are basically the same as normal queries. You would typically also call these from an action.
 
 {% tabs %}
-{% tab title="overmind/actions.ts" %}
+{% tab title="overmind/actions.js" %}
 ```typescript
-import { AsyncAction } from 'overmind'
-
-export const getPosts: AsyncAction = async ({ state, effects }) => {
+export const getPosts = async ({ state, effects }) => {
   const { posts } = await effects.queries.posts()
 
   state.posts = posts
 }
 
-export const addPost: AsyncAction<string> = async ({ effects }, title) => {
+export const addPost = async ({ effects }, title) => {
   await effects.mutations.createPost({ title })
 }
 ```
@@ -175,17 +161,15 @@ Now that we have the data from our query in the state, we can decide ourselves w
 Again, since our data is just part of our state we are in complete control of optimistically adding new data. Let us create an optimistic post.
 
 {% tabs %}
-{% tab title="overmind/actions.ts" %}
+{% tab title="overmind/actions.js" %}
 ```typescript
-import { AsyncAction } from 'overmind'
-
-export const getPosts: AsyncAction = async ({ state, effects }) => {
+export const getPosts = async ({ state, effects }) => {
   const { posts } = await effects.queries.posts()
 
   state.posts = posts
 }
 
-export const addPost: AsyncAction<string> = async ({ state, effects }, title) => {
+export const addPost = async ({ state, effects }, title) => {
   const optimisticId = String(Date.now())
 
   state.posts.push({
@@ -209,7 +193,7 @@ There are two points of options in the Graphql factory. The **headers** and the
 The headers option is a function which receives the state of the application. That means you can produce request headers dynamically. This can be useful related to authentciation.
 
 {% tabs %}
-{% tab title="overmind/index.ts" %}
+{% tab title="overmind/index.js" %}
 ```typescript
 import { graphql } from 'overmind-graphql'
 import * as queries from './queries'
@@ -233,7 +217,7 @@ export const config = graphql({
 The options are the options passed to [GRAPHQL-REQUEST](https://github.com/prisma-labs/graphql-request).
 
 {% tabs %}
-{% tab title="overmind/index.ts" %}
+{% tab title="overmind/index.js" %}
 ```typescript
 import { graphql } from 'overmind-graphql'
 import * as queries from './queries'
@@ -258,7 +242,50 @@ export const config = graphql({
 {% endtab %}
 {% endtabs %}
 
-## Generate typings
+## Typescript
+
+There is only a single type exposed by the library, **Query**. It is used for both queries and mutations.
+
+{% tabs %}
+{% tab title="overmind/queries.ts" %}
+```typescript
+import { Query, gql } from 'overmind-graphql'
+// You will understand this very soon
+import { Posts } from './graphql-types'
+
+export const posts: Query<Posts> = gql`
+  query Posts {
+    posts {
+      id
+      title
+    }
+  }
+`;
+```
+{% endtab %}
+{% endtabs %}
+
+The first **Query** argument is the result of the query. There is also a second query argument which is the payload to the query, as seen here.
+
+{% tabs %}
+{% tab title="overmind/mutations.ts" %}
+```typescript
+import { Query, gql } from 'overmind-graphql'
+// You will understand this very soon
+import { CreatePost, CreatePostVariables } from './graphql-types'
+
+export const createPost: Query<CreatePost, CreatePostVariables> = gql`
+  mutation CreatePost($title: String!) {
+    createPost(title: $title) {
+      id
+    }
+  }
+`
+```
+{% endtab %}
+{% endtabs %}
+
+### Generate typings
 
 It is possible to generate all the typings for the queries and mutations. This is done by using the [APOLLO](https://www.apollographql.com/) project CLI. Install it with:
 
@@ -284,6 +311,10 @@ npm run schema
 
 Apollo will look for queries defined with the **gql** template tag and automatically produce the typings. That means whenever you add, remove or update a query in your code you should run this script to update the typings. It also produces what is called **graphql-global-types**. These are types related to fields on your queries, which can be used in your state definition and/or actions.
 
+{% hint style="info" %}
+Note that initially you have to define your queries without types and after running the script you can start typing them to get typing in your app and ensure that your app does not break when you change the queries either in the client or on the server
+{% endhint %}
+
 ## Optimize query
 
 It is possible to transpile the queries from strings into code. This reduces the size of your bundle, though only noticeably if you have a lot of queries. This can be done with the [BABEL-PLUGIN-GRAPHQL-TAG](https://github.com/gajus/babel-plugin-graphql-tag).