├── .gitignore
├── README.md
├── blogPart1.txt
├── blogPart2.txt
├── channel.sql
├── golang
├── .realize.yaml
├── app
│ ├── config
│ │ ├── connection
│ │ │ └── connection.go
│ │ ├── constants
│ │ │ └── constants.go
│ │ └── database
│ │ │ └── database.go
│ ├── graph
│ │ └── generated.go
│ ├── model
│ │ └── models_gen.go
│ └── resolver
│ │ ├── ChannelResolver.go
│ │ └── resolver.go
├── gqlgen.yml
├── main.go
└── schema.graphql
└── reactjs
├── package.json
├── public
├── css
│ ├── bootstrap.min.css
│ ├── dataTables.bootstrap4.min.css
│ ├── datatables.min.css
│ └── loader.css
├── img
│ ├── 3pl-logo-600.png
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── green.png
│ ├── red.png
│ ├── yellow.jpg
│ └── yellow.png
├── index.html
└── js
│ ├── bootstrap.min.js
│ ├── dataTables.bootstrap4.min.js
│ ├── datatables.min.js
│ ├── jquery-3.2.1.min.js
│ ├── jquery.dataTables.min.js
│ └── jquery.validate.min.js
└── src
├── App.jsx
├── components
└── ChannelList
│ ├── ChannelList.css
│ └── ChannelList.jsx
├── environment.jsx
├── index.js
└── style
└── app.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | reactjs/node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | package-lock.json
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
25 |
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Golang-gqlgen-Reactjs-subscription-demo
2 |
3 | You can find step by step guide for Golang Part 1 [here](https://www.logisticinfotech.com/blog/graphql-subscription-golang-reactjs/) And React Part 2 [here](https://www.logisticinfotech.com/blog/react-apollo-client-subscription/) to understand this demo properly.
4 |
5 | for golang graphql gqlgen package is used.
6 | for reacjs applo-client is used.
7 |
8 | ## Preview
9 | 
10 |
11 | ## How to Run
12 | ```
13 | cd golang
14 | go get ./
15 | go run main.go
16 |
17 | cd reactjs
18 | npm install
19 | npm start
20 |
21 | ```
22 |
23 | Golang graphql server will start on
24 | http://localhost:8888
25 |
26 | React server will start on
27 | http://localhost:3000
28 |
29 |
30 |
31 | ## Further help
32 |
33 | Checkout full blog for Golang Part 1 [here](https://www.logisticinfotech.com/blog/graphql-subscription-golang-reactjs/) And React Part 2 [here](https://www.logisticinfotech.com/blog/react-apollo-client-subscription/)
34 |
--------------------------------------------------------------------------------
/blogPart1.txt:
--------------------------------------------------------------------------------
1 | For this demo we have used golang gqlgen package, mysql and reactjs apollo-client.
2 | For better understanding we have used mysql for database.
3 | Purpose of this demo is to showcase graphql query, mutation and subscription in golang.
4 | Although gqlgen original documantation is good but I thought its best to do CRUD saperatly for learning purpose.
5 | I hope this will great help to someone starting golang graphql.
6 | I am considering reader has little knowledge of golang and database connection in golang
7 |
8 | This is part1 of two searies tutorial
9 | 1. golang gqlgen backend
10 | 2. reactjs apollo-client front end which using this golang backend.
11 |
12 | what is gqlgen?
13 | Its golang package cum utility which allows us to auto generate golang code stub from graphql schema automatically.
14 | Their original getting started is good to read but I will mention steps here also.
15 |
16 | Step 1 :
17 | > Install gqlgen
18 | $ go get -u github.com/99designs/gqlgen github.com/vektah/gorunpkg
19 |
20 | > All the code we will be doing should reside in go/src folder.
21 | So purpose of this demo
22 | ~/go/src/golang-gqlgen-reactjs-subscription-demo/golang
23 | this is preferred path.
24 |
25 |
26 | Step 2:
27 | so first we need to create our required graphql schema.
28 |
29 | Create schema.graphql file with below:
30 | type Channel {
31 | id: Int! # "!" denotes a required field
32 | name: String!
33 | }
34 |
35 | type Query {
36 | channels: [Channel!]!
37 | }
38 |
39 | type Mutation {
40 | addChannel(name: String!): Channel!
41 | updateChannel(id:Int!,name: String!): Channel!
42 | deleteChannel(ID: Int!): Channel!
43 | }
44 |
45 | type Subscription {
46 | subscriptionChannelAdded: Channel!
47 | subscriptionChannelDeleted: Channel!
48 | subscriptionChannelUpdated: Channel!
49 | }
50 |
51 | then next file we need is gqlgen.yml
52 | this file is responsible to direct gqlgen where to autogenerate files.
53 |
54 | for our demo purpose content will be as below
55 | schema: schema.graphql
56 | exec:
57 | filename: app/graph/generated.go
58 |
59 | model:
60 | filename: app/model/models_gen.go
61 |
62 | resolver:
63 | filename: app/resolver/resolver.go
64 | type: Resolver
65 |
66 | Step 3:
67 | inside our mentioned folder fire command
68 | $ gqlgen
69 |
70 | this will generate below files if you are first time running it.
71 |
72 | app/graph/generated.go
73 | app/model/models_gen.go
74 | app/resolver/resolver.go (if this file exists it will not be regenrated)
75 |
76 | Step 4:
77 | So first thing will require for us is graphql query to get all channels.
78 |
79 | As we have followed little different structure for ease of understanding and maintanance.
80 | Create file app/resolver/ChannelResolver.go
81 |
82 | func (r *queryResolver) Channels(ctx context.Context) ([]model.Channel, error) {
83 | db := connection.DbConn()
84 | var query = "SELECT * FROM channel"
85 | selDB, err := db.Query(query)
86 | var arrChannel []model.Channel
87 | for selDB.Next() {
88 | var name string
89 | var id int64
90 | err = selDB.Scan(&id, &name)
91 | if err != nil {
92 | panic(err.Error())
93 | }
94 | todo1 := model.Channel{ID: int(id), Name: name}
95 | arrChannel = append(arrChannel, todo1)
96 | }
97 |
98 | defer db.Close()
99 | return arrChannel, nil
100 | }
101 |
102 | dont forget to remove below funciton from resolver.go file
103 | Channels(ctx context.Context) ([]model.Channel, error)
104 |
105 | For now we will consontrate only on Add Channel Mutation and Subscription
106 | (although we have included Edit/Delete Channels mutation and subscription)
107 |
108 | For subscription we need to create one observer for our channel list
109 | var addChannelObserver map[string]chan model.Channel
110 |
111 | Now in ChannelResolver.go init we set blank model.Channel Object in addChannelObserver
112 | func init() {
113 | addChannelObserver = map[string]chan model.Channel{}
114 | }
115 |
116 | When any new channel added we need to add newly added channel into our addChannelObserver
117 |
118 | func (r *mutationResolver) AddChannel(ctx context.Context, name string) (model.Channel, error) {
119 | db := connection.DbConn()
120 |
121 | insForm, err := db.Prepare("INSERT INTO channel(name) VALUES(?)")
122 | if err != nil {
123 | panic(err.Error())
124 | }
125 |
126 | var newChannel model.Channel
127 | res, err := insForm.Exec(name)
128 | if err != nil {
129 | println("Exec err:", err.Error())
130 | } else {
131 | var id int64
132 | id, err := res.LastInsertId()
133 | if err != nil {
134 | println("Error:", err.Error())
135 | } else {
136 | newChannel = model.Channel{ID: int(id), Name: name}
137 | }
138 | }
139 | defer db.Close()
140 | // Add new chanel in addChannelObserver
141 | for _, observer := range addChannelObserver {
142 | observer <- newChannel
143 | }
144 | return newChannel, nil
145 | }
146 |
147 | Now we will create function to fire subscription for channelAdded
148 |
149 | func (r *subscriptionResolver) SubscriptionChannelAdded(ctx context.Context) (<-chan model.Channel, error) {
150 | id := randString(8)
151 | events := make(chan model.Channel, 1)
152 |
153 | go func() {
154 | <-ctx.Done()
155 | delete(addChannelObserver, id)
156 | }()
157 |
158 | addChannelObserver[id] = events
159 |
160 | return events, nil
161 | }
162 |
163 | We can run this code with
164 | $ go run main.go
165 |
166 | and url will be http://localhost:8888
167 |
168 | That is all for golang code
169 |
--------------------------------------------------------------------------------
/blogPart2.txt:
--------------------------------------------------------------------------------
1 | This is a second part of reactjs apollo-client front end in which as backend we have used golang gqlgen graphql server
2 | Here also I am assuming readers know reactjs little bit.
3 |
4 | For this demo again preferred path is
5 | ~/go/src/golang-gqlgen-reactjs-subscription-demo/reactjs
6 |
7 | Step 1 :
8 | you can start react project with default create-react-app
9 |
10 | First of all we need to connect our front-end with back end
11 | So we have used ApolloClient for connection to golang backend
12 |
13 | const wsLink = new WebSocketLink({
14 | uri: environment.WSHost,
15 | options: {
16 | reconnect: true
17 | }
18 | });
19 | const apolloClient = new ApolloClient({
20 | link: wsLink,
21 | cache: new InMemoryCache(),
22 | });
23 |
24 | function render(component) {
25 | ReactDOM.render(
26 | {component}
27 | , document.getElementById('root'));
28 | }
29 |
30 | render();
31 |
32 | Step 2:
33 | Create component for CURD operation of channel
34 | for that we will create file reactjs/src/components/ChannelList.jsx
35 |
36 | Okay so we will try to understand devide this file in few section to understand easily
37 | 1) Import section we need to insert react-apollo and graphql-tag for call graphql Query and Mutation
38 | import React, { Component } from 'react';
39 | import { graphql, Mutation, compose } from 'react-apollo';
40 | import gql from 'graphql-tag';
41 |
42 | 2) Render of react component
43 | class ChannelsList extends Component {
44 | componentWillMount() {
45 | // Add subscribeToMore method for watch subscription of add channel
46 | this.props.data.subscribeToMore({
47 | document: addChannelSubscription, // Use the subscription
48 | updateQuery: (prev, { subscriptionData }) => {
49 | if (!subscriptionData.data) {
50 | return prev;
51 | }
52 | const newChannel = subscriptionData.data.subscriptionChannelAdded;
53 | // Add check to prevent double adding of channels.
54 | if (!prev.channels.find((channel) => channel.id === newChannel.id)) {
55 | let updatedChannels = Object.assign({}, prev, { channels: [...prev.channels, newChannel] });
56 | return updatedChannels;
57 | } else {
58 | return prev;
59 | }
60 | }
61 | });
62 | }
63 |
64 | render() {
65 | // we get data of channels on page render from props
66 | const { data: { loading, error, channels } } = this.props;
67 | if (loading) {
68 | return Loading ...
;
69 | }
70 | if (error) {
71 | return {error.message}
;
72 | }
73 |
74 | return (
75 |
76 |
77 |
78 |
Channel List
79 |
80 |
81 |
88 |
89 |
90 | {channels.map(ch =>
91 | -
92 |
95 |
104 |
105 | )}
106 |
107 |
108 |
109 |
13 | {/* */}
14 |
15 |
16 | );
17 | }
18 | }
19 |
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/reactjs/src/components/ChannelList/ChannelList.css:
--------------------------------------------------------------------------------
1 |
2 | .trash {
3 | padding: 10px;
4 | }
5 | .main-title {
6 | padding-top: 10px;
7 | }
--------------------------------------------------------------------------------
/reactjs/src/components/ChannelList/ChannelList.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { graphql, Mutation, compose } from 'react-apollo';
3 | import gql from 'graphql-tag';
4 | import _ from 'underscore';
5 | import update from 'react-addons-update';
6 | require('./ChannelList.css');
7 |
8 | class ChannelsList extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | id: "",
13 | nameValue: "",
14 | }
15 | }
16 |
17 | handleKeyUp = (evt) => {
18 | if (evt.keyCode === 13) {
19 | evt.persist();
20 | if (this.state.id !== "") {
21 | this.props.updateChannelMutation({
22 | variables: {
23 | name: evt.target.value,
24 | id: this.state.id
25 | },
26 | }).then((data) => {
27 | evt.target.value = '';
28 | });
29 | this.setState({
30 | id: ""
31 | })
32 | } else {
33 | this.props.createChannelMutation({
34 | variables: {
35 | name: evt.target.value
36 | },
37 | }).then((data) => {
38 | evt.target.value = '';
39 | });
40 | }
41 | };
42 | }
43 |
44 |
45 | componentWillMount() {
46 | this.props.data.subscribeToMore({
47 | document: addChannelSubscription, // Use the subscription
48 | updateQuery: (prev, { subscriptionData }) => {
49 | if (!subscriptionData.data) {
50 | return prev;
51 | }
52 | const newChannel = subscriptionData.data.subscriptionChannelAdded;
53 | // Add check to prevent double adding of channels.
54 | if (!prev.channels.find((channel) => channel.id === newChannel.id)) {
55 | let updatedChannels = Object.assign({}, prev, { channels: [...prev.channels, newChannel] });
56 | return updatedChannels;
57 | } else {
58 | return prev;
59 | }
60 | }
61 | });
62 | this.props.data.subscribeToMore({
63 | document: deleteChannelSubscription, // Use the subscription
64 | updateQuery: (prev, { subscriptionData }) => {
65 | if (!subscriptionData.data) {
66 | return prev;
67 | }
68 | const newChannel = subscriptionData.data.subscriptionChannelDeleted;
69 | const deleteIndex = _.findIndex(prev.channels, (item) => item.id === newChannel.id);
70 | if (deleteIndex < 0) {
71 | return prev;
72 | }
73 | return update(prev, {
74 | channels: {
75 | $splice: [[deleteIndex, 1]]
76 | }
77 | });
78 | }
79 | });
80 | this.props.data.subscribeToMore({
81 | document: updateChannelSubscription, // Use the subscription
82 | updateQuery: (prev, { subscriptionData }) => {
83 | if (!subscriptionData.data) {
84 | return prev;
85 | }
86 | }
87 | });
88 | }
89 |
90 | onEditClick = (ch) => {
91 | this.setState({
92 | nameValue: ch.name,
93 | id: ch.id
94 | });
95 | }
96 | onChangeFunc = (event) => {
97 | this.setState({
98 | nameValue: event.target.value
99 | })
100 | }
101 | render() {
102 | const { data: { loading, error, channels } } = this.props;
103 | if (loading) {
104 | return Loading ...
;
105 | }
106 | if (error) {
107 | return {error.message}
;
108 | }
109 | return (
110 |
111 |
112 |
113 |
Channel List
114 |
115 |
116 |
123 |
124 |
125 | {channels.map(ch =>
126 | -
127 |
130 |
140 |
141 | )}
142 |
143 |
144 |
145 |