Forem: David Alejandro Quiñonez

My own realtime chat with react, graphql and postgresql [part 8 - Routing and session token]

David Alejandro Quiñonez — Tue, 03 Nov 2020 15:45:46 +0000

As we saw in the previous part, we were able to execute the sign in mutation (i hope you tried to build the sign up mutation by your self, in any case at the end i will post the repo ;)).

Now in this part we'll see how to use the routing system programmatically in react and how to store in the local storage the user's token.

First of all we need to provide a way to access the session from any component inside the app, so we dont have to repeat a lot of code i propose to use context API. If you have another idea in order to achive the global session access let me know in the comments!

For this, lets create our auth context.

./utils/Auth.context.js


import React from "react";
const AuthContext = React.createContext();
export default AuthContext;

Now we can provide this context to all our components.The goal using context is to get the token authetication value that's updated in our database every sign in and sign up for each user.

This token has to be persisten in order to remember our login even if we close the app. For this we'll use localstorage.

Let's see that in the code:

./App.jsx

import { ApolloProvider } from "@apollo/client";
import React, { useState } from "react";
import { HashRouter } from "react-router-dom";
import AppRouter from "./AppRouter";
import { client } from "./graphql/client";
import appRoutes from "./routes/app.routes";
import AuthContext from "./utils/Auth.context";

const App = () => {
  const [authToken, setAuthenticated] = useState(null);

  const handleAuthFlow = (authToken) => {
    setAuthenticated(authToken);
    if (authToken) {
      localStorage.setItem("authToken", JSON.stringify(authToken));
    } else {
      localStorage.removeItem("authToken");
    }
  };

  return (
    <div className="App">
      <AuthContext.Provider value={{ authToken, handleAuthFlow }}>
        <ApolloProvider client={client}>
          <HashRouter basename="/">
            <AppRouter routes={appRoutes} />
          </HashRouter>
        </ApolloProvider>
      </AuthContext.Provider>
    </div>
  );
};

export default App;

The authToken variable is the token we'll get from the graphql mutations response.
The handleAuthFlow function will save or remove the token from the localstorage.
The AuthContext.Provider will provide our token and our handleAuthFlow so we dont repeat a lot of code.

Now with this setup we can access the provider from our login container.

./containers/Login/Login.jsx

...
const Login = (props) => {
...
const { handleAuthFlow } = useContext(AuthContext);
const [submitted, setSubmitted] = useState(false);

useEffect(() => {const authToken = JSON.parse(localStorage.getItem("authToken"));
    if (authToken) {
      props.history.push("/chatroom");
    }
  }, [props.history]);

useEffect(() => {
   if (!loading) {
      if (data?.signInUser.usr) {
        handleAuthFlow(data.signInUser.token);
        props.history.push("/chatroom");
    } else if (submited) {
        console.log("nope");
        setSubmitted(false);
     }
    }
  }, [data, loading, handleAuthFlow, props.history, submitted]);

const onSubmitSignin = (fields) => {
   signInUser({
      variables: { usr: fields.username, password: fields.password }});
    setSubmitted(true);
  };
...

}
...

Let's explain the changes:

With the useContext hook we can access the data provided from the AuthContext.
The submited flag will allow us to check when the form was submitted so we can show messages in case the mutation response comes empty.
Using the first useEffect hook we can 'watch' over a state, so if the token is saved we navigate to the Chatroom container using the history from the react-router provider.
With the second useEffect hook we wait for the response of the signInUser mutation, and then decide if navigate or show a message.

So now we can actually login, but let's also setup the logout:

./containers/Chatroom/Chatroom.jsx

import React, { useContext } from "react";
import AuthContext from "../../utils/Auth.context";

const Chatroom = () => {
  const { handleAuthFlow } = useContext(AuthContext);

  const logout = () => {
    handleAuthFlow(null);
  };
  return (
    <div>
      chatroom
      <p onClick={logout}>logout</p>
    </div>
  );
};

export default Chatroom;

Using the handleAuthFlow with a null param will erease the token from the local storage, and because of the PrivateRoute HOC we'll see the automatic redirection to the login container!

And that's it, we have an authentication flow with graphql and react, in the next part we'll be setting the real time chat!!

My own realtime chat with react, graphql and postgresql [part 7 - React Login]

David Alejandro Quiñonez — Wed, 28 Oct 2020 20:23:13 +0000

In this part we'll be seeing how to start the apollo client in react, use mutations and signin our first user from the web.

Previously we saw the first steps in the project structure and the routing system, but we didn't create the containers that renders those url paths, so let's do it!

But first we have to configure our apollo-client in order to use apollo in react. For this let's install some packages: npm i @apollo/client apollo-utilities graphql apollo-link-ws subscriptions-transport-ws graphql-tag.

./graphql/client.js

import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client";
import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";

const server_url = process.env.SERVER_URL;

const httpLink = new HttpLink({
  uri: "http://server_url",
});

// Create a WebSocket link:
const wsLink = new WebSocketLink({
  uri: `ws://server_url`,
  options: {
    reconnect: true,
  },
});

const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  wsLink,
  httpLink
);

export const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: link,
});

There is a few important things happening here.

ApolloClient will allow us to compose a client object to use it as a provider so our app can access this api from any component under the main component node we define.
The server_url constant is the path that we got from deploy our server, if we are running this locally it would be something like localhost:8080/graphql.
The HttpLink and the WebSocketLink are link creators, we'll use those links to comunicate with the sockets and http api we defined in our backend. 4.The split operator let us redirect the queries, mutations and subscriptions to the specific endpoints they correspond to.

Now we can provide this client to all our app so we can excecute the graphql operations wherever we like.

./App.jsx

import { ApolloProvider } from "@apollo/client";
import React from "react";
import { HashRouter } from "react-router-dom";
import AppRouter from "./AppRouter";
import { client } from "./graphql/client";
import appRoutes from "./routes/app.routes";

const App = () => {
  return (
    <div className="App">
      <ApolloProvider client={client}>
        <HashRouter basename="/">
          <AppRouter routes={appRoutes} />
        </HashRouter>
      </ApolloProvider>
    </div>
  );
};

export default App;

Now we actually can connect to the backend, but first we have to define what we want to say to it, or what we want it to answer us.

To do this let's define our first operation, the signin mutation.

./graphql/mutations/signIn.js

import gql from "graphql-tag";

export default gql`
  mutation signInMutation($usr: String, $password: String) {
    signInUser(usr: $usr, password: $password) {
      usr
      name
      type
      token
    }
  }
`;

gql is basically a graphql interpreter that reads a string and translate it into graphql language. You may have notice that this string is exactlly the same we tested in the playground, shout-out to the playground!

Now we can consume this specific endpoint.

Let's login.

./containers/Login/Login.jsx

import { useMutation } from "@apollo/client";
import React, { useEffect } from "react";
import Signin from "../../components/Signin/Signin";
import SIGNIN_USER from "../../graphql/mutations/signIn";

const Login = () => {
  const [signInUser, { data, error, loading }] = useMutation(SIGNIN_USER);

  const onSubmitSignin = (fields) => {
    signInUser({
      variables: { usr: fields.username, password: fields.password },
    });
  };

  useEffect(() => {
    if (!loading) {
      console.log(data);
      if (data?.signInUser.usr) {
        console.log("Should let me in");
      } else {
        console.log("You shall not pass");
      }
    }
  }, [data, loading]);

  return (
    <div>
      <Signin onSubmit={onSubmitSignin}></Signin>
    </div>
  );
};

export default Login;

As always, let's check this piece of code.

The useMutation hook allow us to execute the SIGNIN_USER mutation as a function signInUser, also it let us check the data, if an error occur and whereas our petition is loading.
The Signin component is just a form that resolve the username and the password, so it's submit function fires the signInUser mutation with those params.
Using the useEffect hook we can check for data and loading states to change.

To check if everything is ok you could create a new user in the playground, and come back to the app to try those credentials. The console should print Should let me in.

In the next part we'll use the routing system we created so we can navigate to the chatroom container. As an exercise you should try to build the signup flow (hint: it's pretty similar).

My own realtime chat with react, graphql and postgresql [part 6 - React setup]

David Alejandro Quiñonez — Wed, 28 Oct 2020 20:22:52 +0000

In the following parts we are going to configure the client, the react app that will consume the api we built previously.

I would recommend to initialize the project with create-react-app, running npx create-react-app myFrontend on the console (npx comes with npm 5.2+)

We can start with the project structure. I'll use the containers/components pattern, this means centralize the state by a group of 'containers' and print in the dom some fabulous things with the 'components'.

For this project I built a Login and a Chatroom containers. We'll be seeing deep down that code in a bit.

Also we'll need a guarded routing system in order to prevent the access of not logged users to the chat. For this I'll use react-router, you can install with npm install react-router-dom.

For the styles I'll use sass, you can check out how to implement this here.

So let's start coding!

First of all let's build the routing system.

./routes/app.routes.js

import Login from "../containers/Login/Login";
import Chatroom from "../containers/Chatroom/Chatroom";

const appRoutes = [
  { path: "/login", component: Login },
  {
    path: "/chatroom",
    private: true,
    component: Chatroom,
  },
  { redirect: true, path: "/", to: "/login" },
];

export default appRoutes;

The appRoutes array is composed by objects that have path, component, and a private attribute. The redirect flag will allow the react-router to match the root paht / to login and vice versa.

./utils/PrivateRoute.jsx

import React from "react";
import { Route, Redirect } from "react-router-dom";

const PrivateRoute = ({ component: Component, to, key }) => {
  const shallPass = false;
  return (
    <Route
      to={to}
      key={key}
      render={(props) =>
        shallPass ? <Component {...props} /> : <Redirect to="/" />
      }
    />
  );
};

export default PrivateRoute;

This utility component will use a flag shallPass to let a user see the component or redirect to the root. For now, we define the flag as false, but it will be related to the login process.

./AppRouter.js

import React from "react";
import { Route, Switch, Redirect } from "react-router";
import PrivateRoute from "./utils/PrivateRoute";

const AppRouter = ({ routes }) => {
  return (
    <Switch>
      {routes.map((prop, key) => {
        if (prop.redirect)
          return <Redirect from={prop.path} to={prop.to} key={key} />;
        if (prop.private)
          return (
            <PrivateRoute
              from={prop.path}
              component={prop.component}
              key={key}
            />
          );
        return <Route path={prop.path} component={prop.component} key={key} />;
      })}
    </Switch>
  );
};

export default AppRouter;

Lets analize this router:

We will use a routes array as a prop. This array has the same properties as the app.routes.js.
Using the Redirect component from react-router we can show the component depending on the redirect flag.
Depending on the private flag we use the PrivateRoute guard to secure the navigation.

./App.jsx

import React from "react";
import { HashRouter } from "react-router-dom";
import AppRouter from "./AppRouter";
import appRoutes from "./routes/app.routes";

const App = () => {
  return <div className="App">
     <HashRouter basename="/">
        <AppRouter routes={appRoutes} />
      </HashRouter>
  </div>;
};

export default App;

Let's break this code a little bit:

Using HashRouter we add a base path '#', this is useful if we're going to deploy our frontend in some third party hosting service because of the routing they may have implemented. If you are using your own hosting you could use the BrowserRouter.
As we saw in the AppRouter it recives a routes property, this routes are composed by a pair of path and component so our routing sytem know what to render.

If we run npm start you won't be able to see anything, actually you may have some errors, this is because you haven't created the Login and Chatroom containers. In the next part we will start with the Login container and the graphql petitions.

How to use Sass in a React project

David Alejandro Quiñonez — Sat, 24 Oct 2020 13:33:34 +0000

Sass is a css extension that provides wonderful features such as variables, mixins, imports, and an easier way to read the stylesheets.

This is why is so popular and the js frameworks have implemented it in its project building.

To use sass in a react project you have to install the node-sass package with npm i node-sass --save. This package basically allows us to import the scss files into our jsx files.

Now having a stylesheet as follows, we can do two things:

$color:red;

.container{
  background-color:$color;
}

Import as stylesheet

import "styles.scss"

function App() {
  return (
   <div className="container">...</div>
 )
}

export default App;

Import as module
For this case, the scss file must have module in its name, like this styles.module.scss

import styles from "styles.module.scss"

function App() {
  return (
   <div className={styles.container}>...</div>
 )
}

export default App;

And that's it, you have implemented sass in your react project.

My own realtime chat with react, graphql and postgresql [part 5 - Graphql playground]

David Alejandro Quiñonez — Wed, 21 Oct 2020 22:56:52 +0000

As we saw in the previous part, a playground interface has been deployed in our server url.

In this playground we can now check the schemas, queries, mutations and the typeDefs.

In the right section we have the Docs and the Schemas tabs.
The schemas show ... well, the secrets of the universe; and the docs shows us how to call the mutations, queries and subscriptions.

So let's run our first mutation, let's create an user.

mutation signUpUSer(
  $usr: String
  $name: String
  $password: String
  $type: String
) {
  signUpUser(usr: $usr, password: $password, name: $name, type: $type) {
    name
    usr
  }
}

This is the mutation we wrote in our backend, and the typed params we defined. The notation $ in those params allows us to use the Query Variables section, where we can define them as follows.

{"usr":"dalejan","name": "David","password": "1234","type": "none"}

If we run this mutation it should print the name and the username in the right section. We can also verify if our database is correctly saving the user.

In our Elephantsql instance, we can run SQL queries as follows.

If everything was ok running this query must return a single row: our new user!

You can experiment with this playground in order to understand how the rest of the mutations and queries work here.

Now i would like to focus in the realtime functionality, for this you have to create the createMessage mutation.

Once you have setted up this query, you can now create the subscription messageAdded as follows.

subscription {messageAdded{text,usr}}
```


If you run this subscription on the playground you'll see a `Listening` log in the right section. Now if we go back and run the `createMessage` mutation, and check the subscription log we can see the message added!

*Now our backend is ready.* 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p0jb4ly7mja7v875ocl6.gif)

In the next sections we'll be seeing how to implement a graphql client with react!

My own realtime chat with react, graphql and postgresql [part 4 - Server]

David Alejandro Quiñonez — Wed, 21 Oct 2020 00:00:04 +0000

So, previously we've already created our queries, mutations, and subscriptions in order to login and chat in our application.
But now we have to serve our backend so any frontend can consume it.

To do this we've to create the index.js file.

./index.js

const { typeDefs, resolvers } = require("./graphql/index");
const { ApolloServer } = require("apollo-server-express");
const { createServer } = require("http");

const app = require("express")();
const PORT = process.env.PORT || 8080;

const server = new ApolloServer({
  typeDefs,
  resolvers,
  subscriptions: {
    onConnect: () => {
      console.log("coneected");
    },
    onDisconnect: () => {
      console.log("disconected");
    },
  },
});


// Initialize the app
server.applyMiddleware({ app });

const httpServer = createServer(app);
server.installSubscriptionHandlers(httpServer);

// Wrap the Express server
httpServer.listen(PORT, () => {
  console.log(`🚀 Server readys at http://localhost:${PORT}/graphql`);
  console.log(`🚀 Subscriptions ready at ws://localhost:${PORT}/graphql`);
});

As usual, lets break it down.

The ApolloServer is basically an object that group the schemas, the functions and the socket subscriptions to serve them online.
On that apolloServer we now apply an express server as a middleware. Then we use the subscription handlers from apollo in order to allow the socket connection.
Finally we serve the server at a specific port, with the listen function.

Now we can add a run script in our package.json

./package.json

...
"scripts": {
  "start": "index",
   ...
},
...

Or use 'nodemon index' instead, if you want a livereload of your changes.

Lets run it! (npm start).

In our browser we can now access to the server (The full path is printed on the server console once you run the script).

And voila!

In the next part we will be using this interface to build the queries and mutations and check if everything was setted up correctly.

My own realtime chat with react, graphql and postgresql [part 3-Graphql schemas]

David Alejandro Quiñonez — Sat, 17 Oct 2020 13:37:54 +0000

The funny part is about to begin.

In this section we are going to set our graphql queries, and schemas so them matches the sql models created on the first part, and the authentication setted on the second part.

Now we can create a folder graphql to wrap the users and messages schemas.

./graphql/schemas/messages.schema.js

const MESSAGE_TYPES = `
  type Message { id: String, text: String, date: String, usr: String }
`;

module.exports = { MESSAGE_TYPES };

./graphql/schemas/users.schema.js

const USERS_TYPES = `
  type User { usr: String, name: String, type: String, password_digested:String, token: String }
`;

module.exports = { USERS_TYPES };

This schemas are only objects that matches the types defined in the sql section for the messages and users.

Now we can use these schemas to implement mutations and queries with the graphql api apollo.

./graphql/index.js

const { USERS_TYPES } = require("./schemas/users.schema");
const { MESSAGE_TYPES } = require("./schemas/messages.schema");
const { getMessages, addMessage } = require("../data/sql/messages");
const { signin, signup, findUser } = require("../data/sql/users");

const { gql } = require("apollo-server-express");
const { PubSub } = require("apollo-server");

First lets take a look to these weird graphqlrequires.

gql query parser, it allows us to write queries in string format.
PubSub is the magic package that will help us to get the real time functionality. It uses socket subscriptions under the hood to achive that.

Now let's create the mutations!

const pubsub = new PubSub();

const QUERY = gql`
  type Query {
    user(usr: String): User
    messages: [Message]
  }
`;

const MUTATION = gql`
  type Mutation {
    createMessage(text: String, date: String, usr: String): Message
    signInUser(usr: String, password: String): User
    signUpUser(usr: String, name: String, password: String, type: String): User
  }
`;

const SUBSCRIPTION = gql`
  type Subscription {
    messageAdded: Message
  }
`;

const typeDefs = [QUERY, MUTATION, SUBSCRIPTION, USERS_TYPES, MESSAGE_TYPES];

Let's analize this code:

We create a new instance of the PubSub object.
The QUERY constant is a graphql query that defines how our server is going to search for users and messages.
The MUTATION constant is a graphql mutation that defines 3 functions createMessage, signInUser, signUpUser, and the parameters these functions requires.
The SUBSCRIPTION constant is a graphql subscription that will be our connection to the real time messages stream.
The typeDefs is an object required by the graphql server in order to show documentation, and basically this is how the server knows what it can query and mutate.

Now we can actually add funcionality to those things defined before:

const resolvers = {
  Subscription: {
    messageAdded: {
      subscribe: () => {
        return pubsub.asyncIterator(["MESSAGE_ADDED"]);
      },
    },
  },
  Mutation: {
    signInUser: async (parent, args) => {
      return await signin({ ...args });
    },
    signUpUser: async (parent, args) => {
      return await signup({ ...args });
    },
    createMessage: async (parent, args) => {
      pubsub.publish("MESSAGE_ADDED", {
        messageAdded: { ...args },
      });
      return await addMessage({ ...args });
    },
  },
  Query: {
    messages: async () => {
      return await getMessages();
    },
    user: async (paretn, args) => {
      return await findUser(args.usr);
    },
  },
};

module.exports = { typeDefs, resolvers };

The resolvers object is, as the typeDefs object, used by the server. Basically are the functions executed by the server.
The Subscription object is composed by a subscription to the 'MESSAGE_ADDED' topic. This means each time this topic is used for something (like adding a new message), the messageAdded subscription will notice.
The Mutation object is composed by the 3 functions defined on the typeDefs. These functions in turn use the functions of signin, signup, and addMessage. The args parameter should match the defined on the typeDefs.
3.1 The createMessage function is using the pubsub object to subscribe into a topic called 'MESSAGE_ADDED'.
The Query object is returning whatever that is on the messages table and the user info given an username.
Finally we can export the typeDefs and the resolvers so we can start our server.

In the next part we'll be setting up the final details to start our server and run some manual tests to check if everything is ok.

My own realtime chat with react, graphql and postgresql [part 2-Authentication]

David Alejandro Quiñonez — Fri, 16 Oct 2020 16:21:03 +0000

So, in this second part (First part) we are going to configure our backend to allow us sign up and sign in into our chat app!

In our users.js file we have to do a little bit more than before:

Users

./sql/users.js

const bcrypt = require("bcryptjs"); 
const crypto = require("crypto"); 
const db = require("../db.js");

bcrypt is a hashing function that we will use to safely store the users passwords.
And crypto provide us cryptographic functionality that we will use to tokenize the user session.

const signup = (user) => {
  return hashPassword(user.password)
    .then((hashedPassword) => {
      delete user.password;
      user.password_digested = hashedPassword;
    })
    .then(() => createToken())
    .then((token) => (user.token = token))
    .then(() => createUser(user))
    .then((user) => {
      delete user.password_digested;
      return user;
    })
    .catch((err) => {
      console.log(err);
      return err;
    });
};

const hashPassword = (password) => {
  return new Promise((resolve, reject) =>
    bcrypt.hash(password, 10, (err, hash) => {
      err ? reject(err) : resolve(hash);
    })
  );
};

const createToken = () => {
  return new Promise((resolve, reject) => {
    crypto.randomBytes(16, (err, data) => {
      err ? reject(err) : resolve(data.toString("base64"));
    });
  });
};

const createUser = (user) => {
  return db
    .raw(
      "INSERT INTO users ( usr, name, password_digested, token, type) VALUES (?, ?, ?, ?, ?) RETURNING  usr, name, type, token",
      [user.usr, user.name, user.password_digested, user.token, user.type]
    )
    .then((data) => data.rows[0]);
};

So basically we've create an signup-flow. Lets break down that code a litle.

In the signup funciton im hoping to recive a user object that is composed by username, password and type.
Then we hash the password in the hashPassword function, which uses bcrypt.hash() to salt and hash the user password.
After that, we now can delete the user password from our records and only care about the hashedPassword. So at this moment we start to create an user object based on the model defined at the migrations models.
Then we create a token for this session with createToken function, that uses crypto.randomBytes() to get a base64 string. We also add this attribute to the user object.
Finally we use createUser to... well, order some pizza. This function uses the db knex object to insert into the users table that user object we've been composing.

Now we are building the signin-flow:

const signin = (userReq) => {
  let user;
  return findUser(userReq.usr)
    .then((foundUser) => {
      user = foundUser;
      return checkPassword(userReq.password, foundUser);
    })
    .then((res) => createToken())
    .then((token) => updateUserToken(token, user))
    .then(
      () => {
        delete user.password_digested;
        return user;
      },
      (err) => {
        return "User not found, please verify the fields";
      }
    )
    .catch((err) => {
      console.log(err);
      return "Cannot signin, please get in touch with the admin";
    });
};


const findUser = (usr) => {
  console.log(usr);
  return db
    .raw("SELECT * FROM users WHERE usr = ?", [usr])
    .then((data) => data.rows[0]);
};

const checkPassword = (reqPassword, foundUser) => {
  return new Promise((resolve, reject) =>
    bcrypt.compare(
      reqPassword,
      foundUser.password_digested,
      (err, response) => {
        if (err) {
          reject(err);
        } else if (response) {
          resolve(response);
        } else {
          reject(new Error("Verify your password"));
        }
      }
    )
  );
};

const updateUserToken = (token, user) => {
  return db
    .raw("UPDATE users SET token = ? WHERE usr = ? RETURNING  usr, token", [
      token,
      user.usr,
    ])
    .then((data) => data.rows[0]);
};

Lets break it down!

In the signin function i hope to get as a parameter an user object composed by username and password.
Using sql queries in the findUser function we can get the user that is stored (if it exists).
Then with the checkPassword function we can verify if there is a match between the password stored and the one the user is trying. This is posible thanks to bcrypt.compare function.
After that we use again the createToken function to tokenize the current session, and then we use updateUserToken to change the token stored.
Finally we send a response of the user authenticated but without his hashed password.

Ok so we've created our signin signup flow, now we can access this functions by exporting them:

module.exports = {
  signin,
  signup,
  findUser,
};

In the next part we'll be setting our graphql schemas and subscription to fetch messages and signin and signup usign graphql!

My own realtime chat with react, graphql and postgresql [part 1-Backend Setup]

David Alejandro Quiñonez — Thu, 18 Jun 2020 23:36:51 +0000

I've been learning react a while ago, and of course when apollo started to appear on my stackoverflow's feed i also decided to give a chance to graphql.

Graphql is (in short words) an alternative to (in some cases better than) REST. It allows you to cache the responses, query for specific values in a large service response and also has subscriptions: an abstraction of sockets that let you listen when some value was modified, created or deleted.

I built some CRUDs with plain data on the server, but i wanted to challenge my self, so i decided to use a database to achieve the persistence of my data. I chose postgresql.

Now, stop the talk, the code!

Backend

Database

For the database i used ElephantSQL. Creating a database here is a piece of cake, when you finish you will have access to it through an endpoint like this (but don't use this one, is mine!) postgres://pvfaleqnz:T3FGof..ruby.db.elephantsql.com:5432/pvfnhqn

Copy it, or check it later on the dashboard, as you prefer c:

Server

Because of using JS Elon Musk can go to the moon an back the times he decide, i also decided to use it on my backend with Node.

So here starts the fun c:

On your console, terminal, or that thing the hackers use to spy on your chats, type:

npm init To initialize your project. Now you will have your package.json and you'll be able to import packages from npm!
npm i apollo-server apollo-server-express To use apollo functions
npm i graphql graphql-tools To use graphql schemas, queries and subscriptions!
npm i pg knex To create database models and connect it with our database using SQL operations.
npm i express To create our http server!
npm i bcryptjs crypto Because every chat must have authentication, we will use these two to achive a secure signup and signin.

Now our package.json is ready! (for now).

The next step is connect our server with our remote database, for that we are gonna copy the db url showed in the Elephant dashboard and asign it to an environment variable, or wherever you wanna have it. (I highly recommend you to use dotenv package for node to achive the privacy of this url).

First execute knex init on your terminal, in your project folder. This will create a knexfile.js, a file where you can configure your query builder for the database.

For this example is ok if you only configure your development database, but of course pro hackers and facebook techleads define every database for each environment eg. Stagin, QA, Production, etc. So, go on as you like.

./knexfile.js

  development: {
    client: "pg",
    connection: *your db url*,
    migrations: {
      directory: "./data/migrations",
    },
  },

The data/migrations folder is where you are gonna define the structure of your tables eg. Users or Messages.

So the next step is execute knex migrate:make TABLE_NAME to create a file where you are gonna define one table structure.
For the messages table i created this model:

./data/migrations/12345_messages.js

exports.up = function (knex) {
    let createQuery = `CREATE TABLE messages (
                id SERIAL PRIMARY KEY NOT NULL,
                text TEXT NOT NULL,
                date TIMESTAMP NOT NULL,
                usr TEXT REFERENCES users(usr) ON DELETE CASCADE
                )`;

    return knex.raw(createQuery);
  };

  exports.down = function (knex) {
    let dropQuery = `DROP TABLE users`;
    return knex.raw(dropQuery);
  };

And for the users table this one:

./data/migrations/12345_users.js

exports.up = function (knex) {
    let createQuery = `CREATE TABLE users (
                usr TEXT PRIMARY KEY NOT NULL,
                name TEXT NOT NULL,
                type TEXT NOT NULL,
                password_digested TEXT,
                token TEXT NOT NULL
                )`;

    return knex.raw(createQuery);
  };

  exports.down = function (knex) {
    let dropQuery = `DROP TABLE users`;
    return knex.raw(dropQuery);
  };

Now in the ./data folder you can create a db.js file to configure where your connection will point to.

./data/db.js

const knex = require("knex");

const knexfile = require("../knexfile");

const env = process.env.NODE_ENV || "development";
const configOptions = knexfile[env];

module.exports = knex(configOptions);

SQL Queries

Now we can create or query functions for our database. For this we are gonna create a new folder in ./data called sql or somehing like that. The idea is that it is where we gonna find our sql queries.

So create two files ./data/sql/messages.js and ./data/sql/users.js in both files we have to import the db configuration.

Messages

const db = require("../db.js"); 

const addMessage = (message) => {
  return createMessagePromise(message)
    .then((message) => (message ? message : "Error adding new message"))
    .catch((err) => "Error creating message");
};

const createMessagePromise = (message) => {
  return db
    .raw(
      "INSERT INTO messages (text, date, usr) VALUES (?, ?, ? ) RETURNING id, text, date, usr",
      [message.text, message.date, message.usr]
    )
    .then(
      (data) => data.rows[0],
      (err) => console.log(err)
    );
};

const getMessages = () => {
  return getMessagesPromise()
    .then((messages) => (messages ? messages : "Error getting messages"))
    .catch((err) => "Error getting mensajes");
};

const getMessagesPromise = () => {
  return db.raw("SELECT * FROM messages").then(
    (data) => data.rows,
    (err) => console.log(err)
  );
};

module.exports = {
  addMessage,
  getMessages,
};

I'm going to explain the users file in the next part, because of the authentication and register process, so go ahead and check it out!