Skip to content

Commit 5cae4f2

Browse files
author
Mateu Aguiló Bosch
committed
docs: compile documentation properly
1 parent dea8eb3 commit 5cae4f2

File tree

2 files changed

+74
-7
lines changed

2 files changed

+74
-7
lines changed

.emdaer/.offline/plugin-contributors-details-github/contributors-data.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,6 @@
3030
"followers": 90,
3131
"following": 45,
3232
"created_at": "2011-10-20T14:27:43Z",
33-
"updated_at": "2018-10-22T08:42:43Z"
33+
"updated_at": "2018-10-30T08:57:15Z"
3434
}
3535
]

README.md

Lines changed: 73 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,92 @@
55
-->
66

77
<!--
8-
emdaerHash:20e833ffdb0f9cef996102cac0420315
8+
emdaerHash:9f568a6dfedca0e23f0251b2df63218e
99
-->
1010

1111
<h1 id="contentajs-graphql-img-align-right-src-logo-svg-alt-contenta-logo-title-contenta-logo-width-100-">ContentaJS GraphQL <img align="right" src="./logo.svg" alt="Contenta logo" title="Contenta logo" width="100"></h1>
12-
<p>ContentaJS GraphQL is a repository that contains a set of helpers to build your
13-
GraphQL project on top of Contenta.js</p>
14-
<p align="center"><img src="./.emdaer/docs/assets/graphql.png" alt="GraphQL"></p>
12+
<p>ContentaJS GraphQL is a repository that contains a set of helpers to build your GraphQL project on top of Contenta JS.</p>
13+
<p align="center"><img src="./.emdaer/docs/assets/graphql.png" alt="GraphQL" width="60%"></p>
1514

16-
<p><strong>IMPORTANT:</strong> I need to finish this…</p>
15+
<p>This project provides a simple Apollo server instance that you can use in your Contenta JS application. It ships wit a
16+
very convenient <a href="https://www.apollographql.com/docs/graphql-tools/schema-directives.html">GraphQL directive</a> that will
17+
fetch data from your Contenta CMS back-end using JSON API. The result of that data fetch will be parsed and prepared so
18+
it can be resolved by GraphQL without additional work.</p>
19+
<p>You can see this is action in the <a href="https://github.com/contentacms/contentajs/tree/graphql-example-code"><code>graphql-example-code</code></a>
20+
branch. If you prefer, you can see <a href="https://github.com/contentacms/contentajs/compare/9b95bba53e47220129fcf2e84eed9ceedff119d9...graphql-example-code?expand=1">the diff</a>.
21+
That will show the necessary code to add GraphQL to your Contenta project.</p>
1722
<!-- toc -->
1823
<ul>
24+
<li><a href="#benefits-of-graphql-in-nodejs">Benefits of GraphQL in node.js</a></li>
1925
<li><a href="#installation">Installation</a></li>
26+
<li><a href="#the-fromjsonapi-directive">The <code>@fromJsonApi(…)</code> directive</a><ul>
27+
<li><a href="#examples">Examples</a></li>
28+
</ul>
29+
</li>
2030
<li><a href="#contributors">Contributors</a></li>
2131
<li><a href="#license">License</a></li>
2232
</ul>
2333
<!-- tocstop -->
2434
<p><a href="https://travis-ci.org/contentacms/contentajs-graphql/"><img src="https://img.shields.io/travis/contentacms/contentajs-graphql.svg?style=flat-square" alt="Travis"></a> <a href="https://coveralls.io/github/contentacms/contentajs-graphql/"><img src="https://img.shields.io/coveralls/github/contentacms/contentajs-graphql.svg?style=flat-square" alt="Coverage"></a> <a href="https://david-dm.org/contentacms/contentajs-graphql"><img src="https://img.shields.io/david/contentacms/contentajs-graphql.svg?style=flat-square" alt="David Dependency Management"></a> <a href="https://github.com/contentacms/contentajs-graphql"><img src="https://img.shields.io/github/last-commit/contentacms/contentajs-graphql.svg?style=flat-square" alt="Last Commit"></a> <a href="http://npmjs.com/package/@contentacms/contentajs-graphql"><img src="https://img.shields.io/node/v/@contentacms/contentajs-graphql.svg?style=flat-square" alt="Node"></a> <a href="https://github.com/emdaer/emdaer"><img src="https://img.shields.io/badge/📓-documented%20with%20emdaer-F06632.svg?style=flat-square" alt="Documented with emdaer"></a></p>
35+
<h2 id="benefits-of-graphql-in-node-js">Benefits of GraphQL in node.js</h2>
36+
<p>The most obvious benefit of having GraphQL in node.js is that you can aggregate different APIs under a single GraphQL
37+
back-end in a non-blocking I/O runtime. This will <strong>improve performance dramatically</strong>.</p>
38+
<p>Another obvious benefit is that by using the <a href="https://www.apollographql.com/">Apollo Server</a> you get <strong>many</strong> <a href="https://www.apollographql.com/docs/apollo-server/v2/">features
39+
for free</a> (like mocking, persited queries, cache hint directives,
40+
and many <a href="https://github.com/apollographql/apollo-server/tree/master/packages">additional packages</a>). And even more if
41+
your consumers use the <a href="https://www.apollographql.com/docs/react/">Apollo Client</a>.</p>
42+
<p>Another outstanding benefit is that by using <a href="https://github.com/graphql/graphql-js">GraphQL.js</a> you are depending on
43+
the reference implementation of GraphQL. That means that it is supported by the official GraphQL team. It also means
44+
that it has extensive support and a wide <a href="https://graphql.org/community/">community</a>.</p>
2545
<h2 id="installation">Installation</h2>
26-
<p>TODO</p>
46+
<p>You can see an example of this in this <a href="https://github.com/contentacms/contentajs/compare/9b95bba53e47220129fcf2e84eed9ceedff119d9...graphql-example-code?expand=1">demo code</a>.</p>
47+
<ol>
48+
<li>Inside of your Contenta JS project add the necessary dependencies</li>
49+
</ol>
50+
<pre><code>
51+
npm install --save @contentacms/contentajs-graphql graphql graphql-tools
52+
</code></pre>
53+
<ol start="2">
54+
<li><a href="https://github.com/contentacms/contentajs/compare/9b95bba53e47220129fcf2e84eed9ceedff119d9...graphql-example-code?expand=1#diff-f4fed62a72fc59b66a2183017cc4b9cb">Create a server instance with the Contena CMS URL and add it to express</a>.</li>
55+
<li><p>Write your GraphQL types.</p>
56+
</li>
57+
<li><p>If they follow the structure of your JSON API resources they’ll get automatically resolved. See <a href="https://github.com/contentacms/contentajs/compare/9b95bba53e47220129fcf2e84eed9ceedff119d9...graphql-example-code?expand=1#diff-da57a422b90e697b0a5bbe0a11699b7a">this example of an Article type</a>.</p>
58+
</li>
59+
<li><p>If there are any additional fields, you can resolve them <em>the GraphQL way</em>. This example <a href="https://github.com/contentacms/contentajs/compare/9b95bba53e47220129fcf2e84eed9ceedff119d9...graphql-example-code?expand=1#diff-2be3149c012f9a61fb6bbd290edde707R9">creates an extra field called random</a>.
60+
In order to resolve the value of <code>random</code> you will need a resolver like <a href="https://github.com/contentacms/contentajs/compare/9b95bba53e47220129fcf2e84eed9ceedff119d9...graphql-example-code?expand=1#diff-895614263fb87c38476aeb8dad289b12">this one</a>.</p>
61+
</li>
62+
<li><p>THAT’S IT.</p>
63+
</li>
64+
</ol>
65+
<h2 id="the-fromjsonapi-directive">The <code>@fromJsonApi(…)</code> directive</h2>
66+
<p>The <code>@fromJsonApi(…)</code> is the biggest motivator of this repository. Since JSON API allows you to get <em>the information you
67+
need and only the information you need, in a single request</em>, it is the perfect data fetcher for your GraphQL.js
68+
project.</p>
69+
<p>This directive will intelligently turn the response from JSON API into the hierarchical format that GraphQL expects.
70+
This includes all the nested relationships at all levels. This leaves everything ready for the user to start selecting
71+
fields for the response.</p>
72+
<h3 id="examples">Examples</h3>
73+
74+
```graphql
75+
type Query {
76+
lastRecipe: Recipe
77+
@fromJsonApi(query: "/recipes?page[limit]=1&sort=createdAt&include=author")
78+
recipesByAuthor(authorName: String!): [Recipe]
79+
@fromJsonApi(
80+
query: "/recipes?filter[author.name]={authorName}&include=author"
81+
)
82+
articlesByAuthor(authorName: String!): [Article]
83+
@fromJsonApi(
84+
query: "/articles?filter[owner.name]={authorName}&include=owner"
85+
)
86+
}
87+
```
88+
<p>Note how you can specify a templated URL with variables. The replacement value for these variables will be specified in
89+
the query. For instance see how the <code>{authorName}</code> value is provided in the GraphQL query below:</p>
90+
<pre><code>
91+
curl -X GET \
92+
'http://localhost:3000/graphql?query={recipesByAuthor(authorName:"Umami"){title,id,random,author{name}}}'
93+
</code></pre>
2794
<h2 id="contributors">Contributors</h2>
2895
<details>
2996
<summary><strong>Contributors</strong></summary><br>

0 commit comments

Comments
 (0)