Loading ...
; 35 | if (error) return{error.message}
; 36 | 37 | return ( 38 |
39 |
46 | );
47 | };
48 |
49 | DataViewer.propTypes = {
50 | data: PropTypes.object
51 | };
52 |
53 | const DataViewerWithData = getGraphQLEnhancedComponent(DataViewer);
54 |
55 | class App extends Component {
56 | render() {
57 | return (
58 | Authors
40 |- {authors.map(a =>
- {a.name} )}
Categories
42 |- {categories.map(c =>
- {c.title} )}
Posts
44 |- {posts.map(p =>
- {p.title} )}
60 | 
61 |
71 |
73 |
61 | Using GraphQL with Contentful
62 |This example shows you a GraphQL setup that relies on Contentful. 63 | If fetches all items for three different content types (author, category, post) 64 | which is normally only possible with three API calls.
65 |With the following GraphQL query it can be done with a single call.
66 |
67 | {graphQLQuery.loc.source.body}
68 | This demo uses React and the Apollo Framework.
70 |71 |
Loading...
37 |
62 |
63 |
64 | `;
65 | }
66 |
--------------------------------------------------------------------------------
/src/helpers/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | graphiql: require('./graphiql.js'),
5 | expressGraphqlExtension: require('./express-graphql-extension.js')
6 | };
7 |
--------------------------------------------------------------------------------
/src/http-client.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const os = require('os');
4 | const qs = require('querystring');
5 | const fetch = require('node-fetch');
6 | const _get = require('lodash.get');
7 |
8 | module.exports = createClient;
9 |
10 | function createClient (config) {
11 | config = config || {};
12 | const opts = {
13 | base: config.base || '',
14 | headers: config.headers || {},
15 | defaultParams: config.defaultParams || {},
16 | timeline: config.timeline || [],
17 | cache: config.cache || {}
18 | };
19 |
20 | return {
21 | get: (url, params = {}) => get(url, params, opts),
22 | timeline: opts.timeline
23 | };
24 | }
25 |
26 | function get (url, params, opts) {
27 | const paramsWithDefaults = Object.assign({}, opts.defaultParams, params);
28 | const sortedQS = getSortedQS(paramsWithDefaults);
29 | if (typeof sortedQS === 'string' && sortedQS.length > 0) {
30 | url = `${url}?${sortedQS}`;
31 | }
32 |
33 | const {base, headers, timeline, cache} = opts;
34 | const cached = cache[url];
35 | if (cached) {
36 | return cached;
37 | }
38 |
39 | const httpCall = {url, start: Date.now()};
40 | timeline.push(httpCall);
41 |
42 | cache[url] = fetch(
43 | base + url,
44 | {headers: Object.assign({}, getUserAgent(), headers)}
45 | )
46 | .then(checkStatus)
47 | .then(res => {
48 | httpCall.duration = Date.now()-httpCall.start;
49 | return res.json();
50 | });
51 |
52 | return cache[url];
53 | }
54 |
55 | function checkStatus (res) {
56 | if (res.status >= 200 && res.status < 300) {
57 | return res;
58 | } else {
59 | const err = new Error(res.statusText);
60 | err.response = res;
61 | throw err;
62 | }
63 | }
64 |
65 | function getSortedQS (params) {
66 | return Object.keys(params).sort().reduce((acc, key) => {
67 | const pair = {};
68 | pair[key] = params[key];
69 | return acc.concat([qs.stringify(pair)]);
70 | }, []).join('&');
71 | }
72 |
73 | function getUserAgent () {
74 | const segments = ['app contentful.cf-graphql', getOs(), getPlatform()];
75 | const joined = segments.filter(s => typeof s === 'string').join('; ');
76 | return {'X-Contentful-User-Agent': `${joined};`};
77 | }
78 |
79 | function getOs () {
80 | const name = {
81 | win32: 'Windows',
82 | darwin: 'macOS'
83 | }[os.platform()] || 'Linux';
84 |
85 | const release = os.release();
86 | if (release) {
87 | return `os ${name}/${release}`;
88 | }
89 | }
90 |
91 | function getPlatform () {
92 | const version = _get(process, ['versions', 'node']);
93 | if (version) {
94 | return `platform node.js/${version}`;
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const {
4 | createSchema,
5 | createQueryType,
6 | createQueryFields
7 | } = require('./schema.js');
8 |
9 | module.exports = {
10 | createClient: require('./client.js'),
11 | prepareSpaceGraph: require('./prepare-space-graph.js'),
12 | createSchema,
13 | createQueryType,
14 | createQueryFields,
15 | helpers: require('./helpers')
16 | };
17 |
--------------------------------------------------------------------------------
/src/prepare-space-graph.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const _get = require('lodash.get');
4 | const upperFirst = require('lodash.upperfirst');
5 | const camelCase = require('lodash.camelcase');
6 | const pluralize = require('pluralize');
7 |
8 | const ENTITY_TYPES = [
9 | 'Entry',
10 | 'Asset'
11 | ];
12 |
13 | const SHORTCUT_FIELD_TYPE_MAPPING = {
14 | Entry: 'Link