Skip to content

Commit

Permalink
move images to cdn
Browse files Browse the repository at this point in the history
  • Loading branch information
praveenweb committed May 7, 2019
1 parent d1a3877 commit 68a4fb3
Show file tree
Hide file tree
Showing 15 changed files with 8 additions and 8 deletions.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Expand Up @@ -10,11 +10,11 @@ GraphQL is designed for developers of web/mobile apps (HTTP clients) to be able
## GraphQL vs REST: an example
Let's say you have an API to fetch a user's profile and their address. In a typical REST scenario, this is what the request/response would look like:

![GraphQL API example](./intro-to-graphql/rest-api.png)
![GraphQL API example](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/rest-api.png)

If your API server was a GraphQL server instead, this is what your API calls would look like:

![GraphQL API example](./intro-to-graphql/graphql-api.gif)
![GraphQL API example](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/graphql-api.gif)

You can see that the response JSON is different for different "queries" sent by the client.

Expand Down
Expand Up @@ -10,7 +10,7 @@ GraphQL is actually used in an HTTP client (typically a web/mobile app).
Check out the diagram below, to get a sense of how GraphQL is typically used in
your stack:

![GraphQL over HTTP](./graphql-on-http.png)
![GraphQL over HTTP](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/graphql-on-http.png)

### GraphQL client-server flow:

Expand Down
Expand Up @@ -13,7 +13,7 @@ When you connect GraphiQL to a GraphQL endpoint, it
queries the server for its GraphQL schema and gives you a UI to browse
and test queries, and that powers its amazing autocomplete!

![GraphiQL demo](./graphiql.gif)
![GraphiQL demo](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/graphiql.gif)

Tools like GraphiQL make GraphQL APIs really easy
to use and integrate APIs in your app without requiring
Expand All @@ -40,7 +40,7 @@ use a tool like GraphiQL to explore and test your GraphQL queries.
name
}
}
```
```

4. Hit `ctrl + enter` or `cmd + enter` (mac) or click on the ▶️ icon to run the GraphQL query
5. On the right, you should see a list of users by their names that are in the system!
Expand All @@ -56,7 +56,7 @@ that you see on the right hand side.
Our todo app has users, todos and information about users that are currently online.
This is what our API "schema" looks like:

![Schema](./schema.png)
![Schema](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/schema.png)

As you can see, it is a "graph" like schema where all the 3 models are linked to each other.

Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Expand Up @@ -18,7 +18,7 @@ Our task will be convert the "static" UI into a working realtime app.

This is what you should see after the steps above:

![Boilerplate after login](./assets/boilerplate-after-login.png)
![Boilerplate after login](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-vue/boilerplate-after-login.png)

### Load GraphiQL to play with your GraphQL APIs

Expand All @@ -27,4 +27,4 @@ This is what you should see after the steps above:

This is what you should see after the steps above:

![GraphiQL after login](./assets/graphiql-after-login.png)
![GraphiQL after login](https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-vue/graphiql-after-login.png)

0 comments on commit 68a4fb3

Please sign in to comment.