Frontend

Hello everyone, in this article we are going to look at how we can create relations between two object types in GraphQL. This is the second part of GraphQL with Node, MongoDB and React series If you have missed the first part here is the link :  Set up graphQL backend using Node.js, express and mongoDB - Step by Step Reading the above article is important as we are going to use the same example and and continue code from where we left there. Ok until last time we have created two object types Game and Publisher.  Game has field like id,name, genre and publisher has fields id, name and established. Now lets refer the diagram once again As you can see each game has a publisher. So we need to link Game type with PublisherType for that to happen we need to add a key to each game data which will hold reference for it's Publisher Ok so let's modify the dummy data array for Games const games = [ { name: "FIFA" , id: "1...

Hello everyone in this article we are going to learn how to setup graphQL backend server using Node. # What is graphQL * GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data ( As per Wikipedia ). * Developed by Facebook If you want to know why for a specific problem we should use graphQL read this article When should you consider GraphQL for your application? First create a folder which will hold our node files say "graphql-node", within that folder do "npm init" to setup initial basic package.json file Install below dependencies : // for starting local server : Express // for graphQL : graphql // middleware : express-graphql My package.json looks like below code { "name" : "graphql-node" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts...

To understand this, let's take an example : We have two entities here Publisher and Game Publisher has attributes  name and established year Game has  name, publisher and genre One publisher can have multiple games and one game has it's own publisher, games also have relation among based on similar genre. So if we try to solve this problem via rest api we need to have number of endpoints like : domain.com/games domain.com/game/:id domain.com/publishers domain.com/publisher/:id domain.com/game/:id/publisher domain.com/publisher/:id/games etc etc... so you can see to get different set of data we need to expose different endpoints , if there is solution like from request we will send the data mapping and accordingly we will get our choice of data. There will be a single endpoint to handle all such request. Well then the solution is GraphQL. Endpoint : http://localhost:3001/graphql Query we will pass as : {     game:{       ...

Create a folder ex. "MyProject" Use command npm init for initiating package.json Once setup, install Express module using npm i express --save Open the folder using VS Code or any other IDE, create a file called server.js (  You may use any name  ) Copy paste this below code : const express = require( 'express' ); const app = express(); const path = require( 'path' ); const port = process.env.PORT || 3000 ; app.get( '/' , function (req, res) { res.sendFile(path.join(__dirname + '/index.html' )); }); app.listen(port,() => { console.log( ` started on port ${port} ` ); }); You may create multiple route as per your need, use command  node server.js  to start the server For quick access go to package.json file, and add an entry to scripts category like below example : Use ctrl + c to stop the server. { "name" : "image" , ...

In case you missed Part 1, follow this link below   Uploading file into azure blob storage using Azure Keyvault credentials with NodeJS and React - Part 1 So now let's create the UI using reactJS.  Finished app looks like below screenshot, which only has an upload option, you may add other features and fields with validation as you need. Initiate a react app using command : create-react-app sample-azure-client-app Dependency for endpoint call : axios   install via npm i --save axios Create App component import React from 'react'; import UploadImage from './assets/upload.png' import axios from 'axios' const onChange = e => { const files = Array.from(e.target.files) const currentFile = files[0] const formData = new FormData() formData.append('file',currentFile) axios({ url:'http://localhost:3001/upload/file', method:'POST', params:null, data:formData, hea...

Hello everyone, in this article I will talk about how we can upload files into azure blob storage using azure keyvault credentials.   There are multiple ways we can connect to Azure Blob from a webapp(eg. react). Connecting to AzureBlob with static credential is possible directly from React App itself.  But when we are trying to get the credential stored in Azure Keyvault and using that credential to get access to blob storage then we will need a middle layer like Java or Node etc. Here I will show an end to end example . First I will create a node application and expose a service which can be called from React/Angular or any application which will allow user select files and upload them into blob storage directly. Lets get started : Here is the folder structure we have for the Node application. There are some dependencies we need to install before we begin.  My package.json now looks like this : {   "na...