1567563529
Build a React Native app with PostgreSQL and GraphQL - Part 1
React Native is a great option when it comes to developing mobile applications for both iOS and Android smartphones. With React Native you can write an application that works on both platforms with the only difference coming at the view level, with iOS and Android rendering differently. In this two-part series, we’ll be looking at how we can develop an application with React Native and GraphQL. To do this, we’ll be building a simple note-taking app that allows our user to add notes, view, edit and delete them.
For the first part, we’ll be building a GraphQL server with a PostgreSQL database that will serve as the backend of our application. In the second part (blog post to come later) we will build an application with React Native that will consume data from our server.
Let’s get started with our server setup. The folder structure for our project will be as shown in this repo.
In order to build our application, you will need to be familiar with:
- NodeJS
- Express
- Databases
- Mobile development
How to set up an Apollo server with Express
Our backend server will run on Node JS and Express. We’ll have a few initial dependencies to install, but first, we’ll need to initiate our app, run:
npm init
Now let us install our first set of dependencies:
npm install apollo-server apollo-server-express express graphql cors --save
One of the dependencies we have installed is apollo-server, Apollo Server is the best way to quickly build a production-ready, self-documenting API for GraphQL clients, using data from any source. While we are using it with Express, it may be used with several popular libraries such as Hapi and Koa.
Now we are all set to start creating our server. Add the following code to src/index.js.
import cors from 'cors';
import express from 'express';
import {
ApolloServer
} from 'apollo-server-express';
const app = express();
app.use(cors());
const server = new ApolloServer({});
server.applyMiddleware({
app,
path: ‘/graphql’
});
app.listen({
port: 8000
}, () => {
console.log(‘Apollo Server on http://localhost:8000/graphql’);
});
Let’s go through what we have so far, in the code above, we have initialized an Express application as well as an Apollo server instance. Using Apollo Server’s applyMiddleware() method, you can opt-in any middleware, which in our case is the Express app. Also, you can specify the path for your GraphQL API endpoint.
You may also note we applied cors to our Express application, this is to allow external domains to access our application.
Our next step would be to define our schema and resolvers for the Apollo Server instance. But first, let’s cover schema and resolvers.
Schema
The GraphQL schema provided to the Apollo Server is all of the available data for reading and writing data via GraphQL. The schema contains type definitions from a mandatory top-level Query type that allows reading of data followed by field and nested fields. These are defined using the GraphQL Schema Language and allows us to talk about GraphQL schemas in a language-agnostic way.
Here’s what’s in our schema/notes.js:
import {
gql
} from ‘apollo-server-express’;
export default gql `
extend type Query {
notes: [Note!]
note(id: ID!): Note!
}
type Note {
id: ID!
text: String!
}
`;
Let’s take a look at our schema definition for some notable terms we need to be aware of. We have already covered the Query type, but let’s look at the rest:
notesis defined as[Note!]which represents an array ofNoteobjects. The exclamation mark means it is non-nullable, this means you can always expect an array (with zero or more items) when you query thenotesfield- Each
Noteobject contains anidfield defined asID. TheIDscalar type represents a unique identifier, often used to re-fetch an object or as the key for a cache. It is serialized the same way a String is serialized. However, defining it as anIDsignifies that it is not intended to be human‐readable - The
Noteobject also has atextfield defined asStringwhich is one of the built-in scalar types that is a sequence of UTF-8 characters - You will also notice the
notefield is provided withidoptions in the form of(id: ID!). This allows for the use of GraphQL arguments to refine queries. This allows us to fetch a single note by providing it’sIDin our query. The argument is also non-nullable as it must be provided when fetching a single note.
The schema above shall be placed in src/schema/notes.js. We can then have a index.js file inside the src/schema directory with the following code:
import { gql } from “apollo-server-express”;
import noteSchema from "./notes";
const linkSchema = gql`
type Query {
_: Boolean
}
type Mutation {
_: Boolean
}
type Subscription {
_: Boolean
}
`;
export default [linkSchema, noteSchema];
Resolvers
Resolvers are responsible for manipulating and returning data, think of them as the query handlers. Each top-level query in the Query type has a resolver but we’ll make our own per field. The resolvers are grouped in a JavaScript object, often called a resolver map.
Let’s create a notes.js file inside src/resolvers and add the following code to it:
export default {
Query: {
notes: (parent, args, {
models
}) => {
return Object.values(models.notes)
},
note: (parent, {
id
}, {
models
}) => {
return models.notes[id]
}
}
}
The above resolvers allow us to query either individual notes using the note field and provide an id argument or an array of notes using the notes field. We’ll clean up our resolvers once we link our app to the database using sequelize and add Mutations which will allow us to carry out operations other than reading on our data. For now, these resolve dummy data that we’ll have in src/models/index.js which contains the following code:
let notes = {
1: {
id: ‘1’,
text: ‘Hello World’,
},
2: {
id: ‘2’,
text: ‘By World’,
},
};
export default {
notes
};
Now that we have the framework set up for how our data will be stored let’s look at how data manipulation will be done using queries and mutations.
Queries and mutations
Queries and mutations in GraphQL allow us to access and manipulate data on a GraphQL server. Queries are in charge of read operations whereas mutations are in charge of create, update and delete operations.
To create our queries and mutations, we must first define them in our schema. Let’s edit src/schema/notes.js as follows:
import {
gql
} from ‘apollo-server-express’;
export default gql `
extend type Query {
notes: [Note!]
note(id: ID!): Note!
}
extend type Mutation {
createNewNote(text: String!): Note!
deleteNote(id: ID!): Boolean!
updateNote(id: ID!, text: String!): Note!
}
type Note {
id: ID!
text: String!
}
`;
Queries have already been defined earlier so our new addition is the Mutationtype. From the types defined, you can get an idea of what the returned data will look like. For instance, createNewNote takes a text argument that is a string and generates and returns a Note object, updateNote is similar but it also takes the id so that it can find the note to be updated. Meanwhile, deleteNote takes an idboolean that is used to identify the target note and returns a boolean indicating whether the note has been deleted successfully or not.
This is how you can test your queries. Type the following code in your graphql playground:
Get all notes
Fetches and returns all notes saved.
query {
notes {
id
text
}
}
Next hit the Execute Query button and you should be able to see the following result:
Result
{
“data”: {
“notes”: [
{
“id”: “1”,
“text”: “Hello World”
},
{
“id”: “3”,
“text”: “By World”
}
]
}
}
Get note by id
This returns a piece of the data matching the given argument id
query{
note(id: “1”) {
id
text
}
}
Result
{
“data”: {
“note”: {
“id”: “1”,
“text”: “Hello World”
}
}
Next, we’ll need to write a Mutation resolver. Let’s editsrc/resolvers/notes.js
like this:
import uuidv4 from ‘uuid/v4’;export default {
Query: {
notes: (parent, args, {
models
}) => {
return Object.values(models.notes)
},
note: (parent, {
id
}, {
models
}) => {
return models.notes[id]
}
},
Mutation: {
createNewNote: (parent, {
text
}, {
models
}) => {
const id = uuidv4();
const newNote = {
id,
text
}
models.notes[id] = newNote;
return newNote;
},deleteNote: (parent, { id }, { models }) => { const { [id]: note, ...otherNotes } = models.notes if (!note) { return false } models.notes = otherNotes return true },}
For the createNewNote Mutation we are generating the unique id using the uuid/v4 library so we’ll need to install it by running:
npm install uuid/v4 --save
The resolver takes a text argument, generates a unique id and uses them to create a Note object which is then appended to the list of notes. It then returns the new note that has been created.
The deleteNote Mutation takes an id argument, finds a note and creates a new notes object without the note to be deleted and replaces the old notes object with the new one. It returns false if the note is not found and true when the note is found and deleted.
The updateNote Mutation takes the id and text as arguments and updates the Note in the notes object accordingly, returning the updated note at the end.
We can now access these endpoints through the GraphQL playground when we run our application by running npm start and going to localhost:3000/graphql on the browser. You can then try out these actions:
Create a new note
Takes a text argument and creates and returns a note.
mutation {
createNewNote( text: “Hello GraphQl”) {
id
text
}
}
Result
{
“data”: {
“createNewNote”: {
“id”: “3”,
“text”: “Hello GraphQl”
}
}
}
Update note
Takes text and id arguments and updates and returns a note.
mutation {
updateNote(id:3, text:“Graphql is awesome”) {
id
text
}
}
Result
{
“data”: {
“updateNote”: {
“id”: “4”,
“text”: “Graphql is awesome”
}
}
}
Delete note
Takes an id argument and deletes the matching note.
mutation {
deleteNote(id:5)
}
Adding PostgreSQL with Sequelize
We have most of our app ready to go so the next thing we need to look at is how we can save our data to a database. Our database will be PostgreSQL so go ahead and install it from their site then start it.
After that, create a database called mynotes. To do this you can run the command psql in your terminal to open up the PosgreSQL CLI. Once open run:
CREATE DATABASE mynotes;
CREATE USER postgres;
GRANT ALL PRIVILEGES ON DATABASE members TO postgres;
Next you’ll want to add PostgreSQL for Node.js and Sequelize (ORM) to your project. Run:
npm install pg sequelize --save
The next step is to update our models to prepare to link to the database as shown below. The model defines the shape of each piece of data as it will be stored in the database:
const note = (sequelize, DataTypes) => {
const Note = sequelize.define(“note”, {
text: DataTypes.STRING
});
return Note;
};
export default note;
Next, connect to your database from within your application in the src/models/index.js file:
import Sequelize from “sequelize”;const sequelize = new Sequelize(
process.env.DATABASE,
process.env.DATABASE_USER,
process.env.DATABASE_PASSWORD,
{
dialect: “postgres”
}
);const models = {
Note: sequelize.import(“./notes”)
};Object.keys(models).forEach((key) => {
if (“associate” in models[key]) {
models[key].associate(models);
}
});export { sequelize };
export default models;
You’ll need to define the database name, a database super-user, and the user’s password. You may also want to define a database dialect because Sequelize supports other databases as well.
In the same file, you can physically associate all your models with each other if you have multiple models (hence the foreEach loop above) to expose them to your application as data access layer (models) for the database. In our case, we only have one model but this is still good to know.
Now let’s create a .env file at the root directory of the project to hold some critical data as environment variables. The database credentials (database name, database super user name, database super-user password) can be stored as environment variables along with the port on which we wish to run our server.
In the .env file add the following variables or change them to your liking:
PORT=3000
DATABASE=mynotes
DATABASE_USER=postgres
DATABASE_PASSWORD=postgres
Next, let’s update src/index.js to get our databases synchronized when our application is started. Make the following changes:
…
import ‘dotenv/config’;
import models, {
sequelize
} from ‘./models’;
…sequelize.sync().then(async () => {
app.listen({
port: 8000 // you could change this to process.env.PORT if you wish
}, () => {
console.log(‘Apollo Server on http://localhost:8000/graphql’);
});
});
We’ve now linked our application to the database so what we need to do next is replace the logic in our resolvers.
How to connect resolvers to the database
We had dummy data before but with Sequelize we can now allow us to sync our data with our database, allowing for data persistence. To make this happen, we need to update our resolver in src/resolvers/notes.js to integrate the Sequelize API.
export default {
Query: {
notes: async (parent, args, { models }) => {
return await models.Note.findAll();
},
note: async (parent, { id }, { models }) => {
return await models.Note.findByPk(id);
}
},
Mutation: {
createNewNote: async (parent, { text }, { models }) => {
return await models.Note.create({
text
});
},
deleteNote: async (parent, { id }, { models }) => {
return await models.Note.destroy({
where: {
id
}
});
},
updateNote: async (parent, { id, text }, { models }) => {
await models.Note.update(
{
text
},
{
where: {
id: id
}
}
);
const updatedNote = await models.Note.findByPk(id, {
include
});
return updatedNote;
}
}
};
You will notice we no longer need uuid/v4 as Sequelize automatically handles the assignment of ids in our database. The findAll() and findByPk() are commonly used Sequelize methods for database operations, findAll() returns all entries in a certain table whereas findPk() identifies and returns entries that fit a certain criterion such as a matching id in our case.
Other Sequelize methods we make use of include update() and destroy() to update and delete records respectively.
Along with these, we use async/await to implement promise-based asynchronous Javascript requests to our database.
Conclusion
Great! We are all ready to go, the next step is to integrate our GraphQL backend with our front-end app, which we’ll build for mobile in part two of this tutorial.
Thanks For Visiting, Keep Visiting. If you liked this post, share it with all of your programming buddies!
Originally published on blog.logrocket.com
#react-native #reactjs #graphql #postgresql #web-development
What is GEEK
Buddha Community
1598839687
How native is React Native? | React Native vs Native App Development
If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?
In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.
A brief introduction to React Native
Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.
React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.
Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.
Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.
The popularity of React Native comes from its advantages. Some of its advantages are as follows:
- Performance: It delivers optimal performance.
- Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
- UI design: React Native enables you to design simple and responsive UI for your mobile app.
- 3rd party plugins: This framework supports 3rd party plugins.
- Developer community: A vibrant community of developers support React Native.
Why React Native is fundamentally different from earlier hybrid frameworks
Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.
React Native is very close to native. Consider the following aspects as described on the React Native website:
- Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
- Near-native user experience: React Native provides several native components, and these are platform agnostic.
- The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.
Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.
#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native
1621573085
React Native App Developers India, React Native App Development Company
Expand your user base by using react-native apps developed by our expert team for various platforms like Android, Android TV, iOS, macOS, tvOS, the Web, Windows, and UWP.
We help businesses to scale up the process and achieve greater performance by providing the best react native app development services. Our skilled and experienced team’s apps have delivered all the expected results for our clients across the world.
To achieve growth for your business, hire react native app developers in India. You can count on us for all the technical services and support.
#react native app development company india #react native app developers india #hire react native developers india #react native app development company #react native app developers #hire react native developers
1625050361
Top 10 React Native App Development Companies in USA
React Native is the most popular dynamic framework that provides the opportunity for Android & iOS users to download and use your product. Finding a good React Native development company is incredibly challenging. Use our list as your go-to resource for React Native app development Companies in USA.
List of Top-Rated React Native Mobile App Development Companies in USA:
- AppClues Infotech
- WebClues Infotech
- AppClues Studio
- WebClues Global
- Data EximIT
- Apptunix
- BHW Group
- Willow Tree:
- MindGrub
- Prismetric
A Brief about the company details mentioned below:
1. AppClues Infotech
As a React Native Mobile App Development Company in USA, AppClues Infotech offers user-centered mobile app development for iOS & Android. Since their founding in 2014, their React Native developers create beautiful mobile apps.
They have a robust react native app development team that has high knowledge and excellent strength of developing any type of mobile app. They have successfully delivered 450+ mobile apps as per client requirements and functionalities.
Website: https://www.appcluesinfotech.com/
2. WebClues Infotech
WebClues Infotech is the Top-Notch React Native mobile app development company in USA & offering exceptional service worldwide. Since their founding in 2014, they have completed 950+ web & mobile apps projects on time.
They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, WebClues Infotech provides top-notch React Native App solutions that meet the needs of their clients.
Website: https://www.webcluesinfotech.com/
3. AppClues Studio
AppClues Studio is one of the top React Native mobile app development company in USA and offers the best service worldwide at an affordable price. They have a robust & comprehensive team of React Native App developers who has high strength & extensive knowledge of developing any type of mobile apps.
Website: https://www.appcluesstudio.com/
4. WebClues Global
WebClues Global is one of the best React Native Mobile App Development Company in USA. They provide low-cost & fast React Native Development Services and their React Native App Developers have a high capability of serving projects on more than one platform.
Since their founding in 2014, they have successfully delivered 721+ mobile app projects accurately. They offer versatile React Native App development technology solutions to their clients at an affordable price.
Website: https://www.webcluesglobal.com/
5. Data EximIT
Hire expert React Native app developer from top React Native app development company in USA. Data EximIT is providing high-quality and innovative React Native application development services and support for your next projects. The company has been in the market for more than 8 years and has already gained the trust of 553+ clients and completed 1250+ projects around the globe.
They have a large pool of React Native App developers who can create scalable, full-fledged, and appealing mobile apps to meet the highest industry standards.
Website: https://www.dataeximit.com/
6. Apptunix
Apptunix is the best React Native App Development Company in the USA. It was established in 2013 and vast experience in developing React Native apps. After developing various successful React Native Mobile Apps, the company believes that this technology helps them incorporate advanced features in mobile apps without influencing the user experience.
Website: https://www.apptunix.com/
7. BHW Group
BHW Group is a Top-Notch React Native Mobile App Development Company in the USA. The company has 13+ years of experience in providing qualitative app development services to clients worldwide. They have a compressive pool of React Native App developers who can create scalable, full-fledged, and creative mobile apps to meet the highest industry standards.
Website: https://thebhwgroup.com/
8. Willow Tree:
Willow Tree is the Top-Notch React Native Mobile App Development Company in the USA & offering exceptional React Native service. They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, Willow Tree has top-notch React Native App solutions that meet the needs of their clients.
Website: https://willowtreeapps.com/
9. MindGrub
MindGrub is a leading React Native Mobile App Development Company in the USA. Along with React Native, the company also works on other emerging technologies like robotics, augmented & virtual reality. The Company has excellent strength and the best developers team for any type of React Native mobile apps. They offer versatile React Native App development technology solutions to their clients.
Website: https://www.mindgrub.com/
10. Prismetric
Prismetric is the premium React Native Mobile App Development Company in the USA. They provide fast React Native Development Services and their React Native App Developers have a high capability of serving projects on various platforms. They focus on developing customized solutions for specific business requirements. Being a popular name in the React Native development market, Prismetric has accumulated a specialty in offering these services.
Website: https://www.prismetric.com/
#top rated react native app development companies in usa #top 10 react native app development companies in usa #top react native app development companies in usa #react native app development technologies #react native app development #hire top react native app developers in usa
1617268431
Hire Top-Notch React Native App Developers in USA
Do you want to hire talented & highly skilled React Native mobile app developers in USA? AppClues Infotech has the best team of dedicated React Native App designers & developers that provide the complete React Native solution & listed the top-notch USA-based companies list for your kind information.
For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910
#hire best react native app developers in usa #hire react native mobile app developers #top react native development companies #top react native app development company in usa #best react native app development services provider company #custom react native app development company
1616140045
Top Rated React Native Development Agency
AppClues Infotech is a premier & leading React Native app Development Company in USA having highly skilled React Native app developers offering robust services with the latest technology & functionalities.
For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910
#react native app development company #top react native app development company in usa #best react native app development services usa #react native mobile development #react native mobile development #top react native app development companies usa