Source: https://medium.com/@weblab_tech/graphql-everything-you-need-to-know-58756ff253d8 GraphQL started to be a great option for writing customizable API’s and combining multiple services into one single endpoint. The whole idea of having single endpoint but getting different combination of models is very attractive, especially for companies which are working with large scale multi-platform applications with different frontend/mobile developers and designers. This is generally for making REST API’s, and for many cases that’s the way to go for making application backends. But what if you want to give more real time feel and look to your application UI or make subscription based data transfers for improving more efficient infrastructure. Getting project ready 🚀 In this era of Webpack, React and other large JS frameworks it is important to have generically configured project for having scalable codebase. Here is the combination that we are going to configure Node.js + + + Express.js if we need some generic REST API functionality as well GraphQL.js Websocket Subscriptions React.js + Apollo + Websocket Subscriptions Client For me configuring backend first is a tradition, but generally it doesn’t matter. Configuring Node.js backend Let’s just make a basic setup for node.js application with NPM and minimum packages which are required (no junk!). npm initnpm i --save graphql subscriptions-transport-ws express   touch index.js # making main file for Node server   touch schema.js # creating GraphQL schemas here if you want also ES2015 you need to configure Babel as well, there is a lot of articles and boilerplates around that, so skipping that part here. NOTE: After reading documentation and knowing what we need here is how looks like out file index.js { Server } 'http'; { } 'subscriptions-transport-ws'; { execute, subscribe } 'graphql'; 'express-graphql'; express 'express'; { , } './auth_jwt'; import from import SubscriptionServer from import from import GraphHTTP from import from import expressAuth wsAuth from _// Getting base GraphQL Schema_ schema './schema'; import from _/** BASE Express server definition **/_ app = express(); const _// main endpoint for GraphQL Express_app.use('/api/ql', GraphHTTP({schema: schema,graphiql: ,})); true _// Making plain HTTP server for Websocket usage_ server = Server(app); const _/** GraphQL Websocket definition **/_ .create({schema,execute,subscribe,}, {server: server,path: '/api/ws',}, ); SubscriptionServer server.listen(4000, () => { .log('Server started here -> http://0.0.0.0:4000');}); console Now we have a server which is going to respond with the same GraphQL scheme, for both Websocket and REST Express . /api/ws /api/ql Let’s make a basic GraphQL schema and export that from schema.js {GraphQLSchema,GraphQLObjectType,GraphQLString} 'graphql'; import from GraphQLSchema ({query: GraphQLObjectType ({name: 'Query',fields: {message: {type: GraphQLString,resolve() { return 'Hello World!'; }}}})}); export default new new I know, nothing fancy, but still you can get the point, and do more better for your project. Just start a server and go to on your browser, and you will see GraphQL endpoint for getting message localhost:4000/api Configuring React App To get started with React app it is pretty easy and useful to make it with CLI tool, which is just giving you a lot of preconfigured things! create-react-app create-react-app graphql-wscd graphql-wsnpm i --save graphql graphql-tag subscriptions-transport-ws react-apollo apollo-cache-inmemory apollo-client apollo-link-http Most probably you will need React Router, Redux etc… But that’s a different story. After making React app, configuration for having GraphQL Websocket connections looks like this in file graphql-ws src/index.js React 'react'; ReactDOM 'react-dom'; './index.css'; App './App'; registerServiceWorker './registerServiceWorker'; { } 'react-apollo'; { } 'apollo-cache-inmemory'; { } 'subscriptions-transport-ws'; 'apollo-client'; import from import from import import from import from import ApolloProvider from import InMemoryCache from import SubscriptionClient from import ApolloClient from _// Create WebSocket client_ WSClient = (`ws://localhost:4000/api/ws`, {reconnect: ,connectionParams: { }}); const new SubscriptionClient true // Connection parameters to pass some validations// on server side during first handshake GraphQLClient = ({link: WSClient,cache: ()}); const new ApolloClient new InMemoryCache ReactDOM.render(< >< /></ >, .getElementById('root'));registerServiceWorker(); ApolloProvider client={ } GraphQLClient App ApolloProvider document Now when you start your frontend and backend applications you should be able to see Websocket connection from browser development tools. You can watch what kind of data transfer is going on using Networking tab (but I’m sure you already know that!). Last thing that we need to do is make our message available for our users (again, nothing fancy). Let’s connect to our main component. Here is how looks like for this case. Hello world! react-apollo App App.js React, { } 'react'; logo './logo.svg'; './App.css'; { } 'react-apollo'; import Component from import from import import graphql from HelloQuery = `query Hello {hello}`; const gql @graphql(HelloQuery, { name: 'helloQuery' }) {render() { { helloQuery } = .props; class App extends Component const this **return** (  
  <**div** className="App">  
    <**header** className="App-header">  
      <**img** src={logo} className="App-logo" alt="logo" />  
      <**h1** className="App-title">Welcome to React</**h1**\>  
    </**header**\>  
    <**p** className="App-intro">  
      Message from GraphQL Websocket backend   
      <**string**\>{ helloQuery.hello }</**string**\>  
    </**p**\>  
  </**div**\>  
); }} App; export default Apollo client will query field that we defined as a Root query field, and resolve function will return our text. The main beauty of this process is that after configuring websocket client for Apollo client, the rest of the codebase stays the same, but the performance of data transfer is match better! hello This setup is not ideal for most of the applications like where you don’t need always available server, or you want to go with available free services without ability to deploy custom Node.js server, but if you are building some in-house application and want to get max performance, better UI responsiveness, better UX for backend communications and better analytic event messages, you should at least check this out! We’ve done all client’s dashboards using this principle and results are remarkably better than standard REST API with request-response principle. you should consider that scalability of real-time connections requires more skills, so be prepared for that, and hack around 💥 TreeScale BUT 👏 So, clap for this! And write your story with this as a comment!

Decentralization sounds awesome? But what about Privacy?

Real-time React app with GraphQL + Websocket

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Reasons Why We switched from Python To Go

A Great Way To Create A Brilliant GraphQL-Powered Blog

Build performance reports for your Apollo React Components in 30 minutes. ⏲️

Building a dashboard with React & GraphQL

Coding Tutorial: Implement a GraphQL API on Top of an Existing REST API

5 Reasons Why We switched from Python To Go

A Great Way To Create A Brilliant GraphQL-Powered Blog

Build performance reports for your Apollo React Components in 30 minutes. ⏲️

Building a dashboard with React & GraphQL

Coding Tutorial: Implement a GraphQL API on Top of an Existing REST API

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps