How to set up your multiple files upload with GraphQL

To introduce this paper, and why I’m writing it:

For a school project, we had to build a web App with this stack :

  • MongoDb => database
  • GraphQL with Apollo => back/api
  • React with GrapQL => front

The purpose of this project is a resources-painless-aggregation-location, where you can share those resources with friends/colleague ezzi-pizzi..

If we say resources, we want to mean docs, tutorials, or other helpful information that you can share =>File Upload Required…..

I’m new in graphql and Apollo, usually working with REST API and his multer package…


How to use the famous “prevState” to modify our React state without overriding it !

Let start with a basic exemple (the -famous- counter) :

With a fresh new React App:

import "./App.css";
import React, { useState } from "react";
const App = () => {
const [mySuperCounter, setMySuperCounter] = useState(0);
const handleIncrement = () => {
setMySuperCounter(mySuperCounter + 1);
setMySuperCounter(mySuperCounter + 1);
setMySuperCounter(mySuperCounter + 1);
};
const handleReset = () => {
setMySuperCounter(0);
};
return (
<div className="App">
<div>
<button
className="super-button"
type="submit"
onClick={handleIncrement}>
Incrementor
</button>
<button className="super-button" type="submit" onClick= {handleReset}>
State Resettor
</button>
</div>
<div>{mySuperCounter}</div>
</div>
);
};
export default App;

Ok here we have a basic component with…


CSS: Remove opacity inheritance from parent to children

This morning I had to put an image on my Calendar background Page, and was a bit confused about how to stop opacity inheritance from parent to children, here is how you can fix it !

Html Layout:

<div className="main-container">
<div className="my-calendar">
</div>
</div>

(S)CSS Tricks :

.main-container {
position: relative;
height: 100%;
&::before {
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: url('../../images/myBackgroundPics.jpg');
background-size: contain;
opacity: 0.15;
}
.my-calendar {
position: relative*
}
}

First we need to make the position of the container relative.

And…


You’ll learn how to prepare your app to build an API…

Let’s explain what’s an API REST(ful) is ..

An API REST (Representational State Transfert) is an application programming interface who respect specific constraints.

This App let two application talk to each other, in fact API are everywhere…

We don’t go deeper here but to understand it in an easy way :

When you are looking for some data with your mobile phone you send a request to a server, the server retrieves your data and do some actions to send back the data you want..(i.e …

AntoineGGG

An enthusiastic Javascript developper

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store