|
5 | 5 | --> |
6 | 6 |
|
7 | 7 | <!-- |
8 | | - emdaerHash:20e833ffdb0f9cef996102cac0420315 |
| 8 | + emdaerHash:9f568a6dfedca0e23f0251b2df63218e |
9 | 9 | --> |
10 | 10 |
|
11 | 11 | <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> |
15 | 14 |
|
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> |
17 | 22 | <!-- toc --> |
18 | 23 | <ul> |
| 24 | +<li><a href="#benefits-of-graphql-in-nodejs">Benefits of GraphQL in node.js</a></li> |
19 | 25 | <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> |
20 | 30 | <li><a href="#contributors">Contributors</a></li> |
21 | 31 | <li><a href="#license">License</a></li> |
22 | 32 | </ul> |
23 | 33 | <!-- tocstop --> |
24 | 34 | <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> |
25 | 45 | <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> |
27 | 94 | <h2 id="contributors">Contributors</h2> |
28 | 95 | <details> |
29 | 96 | <summary><strong>Contributors</strong></summary><br> |
|
0 commit comments