bloql
bloql copied to clipboard
Blog engine powered by React using Relay and GraphQL to interact with data
bloql
Blog engine powered by React using Relay and GraphQL to interact with data.
Usage
-
Install
bloql
package and a bloql retriever to get files:npm install bloql bloql-markdown-file-database --save
-
Create a backend to serve blog posts:
var path = require('path'); var express = require('express'); var bloql = require('bloql/middleware/express'); const app = express(); bloql(app, { pretty: true, postsPath: path.join(__dirname, 'posts'), database: require('bloql-markdown-file-database') }); ... app.listen(3000, () => { console.log('Server started and listening on port 3000'); });
(for now only available for
express
) -
Now you're all set to use bloql on the client:
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createComponent } from 'bloql/PostList'; class PostList extends Component { render() { // Render your post list using all react components you want return ( <ul> {this.props.posts.map(post => <li key={post.meta.slug}>{post.meta.title}</li> )} </ul> ); } } // Convert your component into a Bloql element PostList = createComponent(PostList); // You can place your component anywhere in any application and // combine it with other React components ReactDOM.render( <PostList/>, document.getElementById('app') );
Have a look there for minimal and understandable examples: bloql-examples