I wanna start by saying I am aware I am not famous ffs I just wanted a really deep title for this article.

For as long as I can remember I have low self-esteem and so do many people, it’s a common thing to have. Millions of people live with this every day, they don’t see anything good when they look at themselves and they wish they did.

I always suffered from this, it’s been a constant in my life for as long as I can remember but it only became crippling in the last two years or so.

WTF do you mean by low self-esteem?

In really simple terms it means you wake up every day not liking what you have become, wishing you were taller, stronger, better. It’s waking up wishing you could see in yourself other people see in you.

It also doesn’t mean you think you suck at everything, I know I am good at some things, like English. I am proud of the fact that several people have thought I was American. It means you don’t see anything good besides the small good things.

Most of the times people assume low self-esteem is mostly a physical thing, you hate your nose or you could wish you would lose some weight but not always. In my case, most of my low self-esteem issues are in terms of personality, I just think I am boring, that there is nothing interesting to know in me. This obviously takes a toll on your physical appearance because you stop caring, in your head, there’s no point right?

As you can see it ends up being a vicious cycle.

“You are an inspiration”

This is where the public eye starts. I have as pretty much like any other women in tech gotten shit in DM’s, YouTube or something else but that’s not usually the ones that get me thinking I suck. It’s actually the good ones, the ones that see things in me I could never see, those are the ones that make me feel like I am a fraud, that I am fooling these people.

I feel like I live in the constant fight to be what people think I am, to be someone I never saw myself being. To me, I am still a failure, not so much professionally but personally. I feel like if only I could be what some people think I am then I will be happy, then I will have it figured out and I will be okay.

I’m a code monkey who lives alone and orders take out a fuck ton. That’s all I see in me.

Sometimes I avoid meeting people I know online because I am scared this will unmask me as this really not cool human being, I’m scared I will be rejected by these human beings. That I won’t be the idea of me they have. It’s very easy for me to feel rejected by someone so in my head, it’s better to just avoid it and if I avoid it then they will still have the idea of me and not the real one.

Sometimes I don’t look at social media and I want to close everything because I know/think everyone in there doesn’t care about the real me, wtv the fuck that means.

What about hate?

I have gotten hate, a random dude once told me people like me are the reason Trump got elected and to this day I am trying to understand that but besides the point.

Its weird hate doesn’t get to me that much but I was hated and bullied for several years, I was gay in a Catholic high school, I made a thick skin.

I can take most types of random hate and shrug it off as nothing happen and sometimes even learn something from that.

I can’t do that with the opposite. I will always assume you like me because you don’t know me.

As for my deep posts here is a meme

One good thing about GraphQL is having control over how our schema and our return values from an API will look like. We can type everything and make sure that if we say something is a string and it’s not we will get an error.

That is amazing for having way more confidence in our code and in what comes back from the backend but by default GraphQL only ships with some basic types.

At the moment the basic types that ship with GraphQL are:String, Int, Float, Boolean,ID and even though all these types are very useful they do not cover everything we want to do in our API. Let’s say we have a list of images returned from an API in GraphQL, we can test if it’s a string but it may be a string that’s not actually an image and we will be showing a broken image to our users.

In this article let’s go over how to create what is called a Scalar type in GraphQL which is basically just a fancy term to say we are creating a new type we can use in our Schema.

Creating the server

I’m gonna use the Apollo Server 2 to get us to create a simple GraphQL server and if you want to follow along you can do by forking this sandbox or by starting locally.

To start locally you will need to install apollo-server ,graphql and nodemon so you will need to run:

After that create a package.json and add the following lines:

Now we can start coding our GraphQL server and in my case, I will only have a Schema with two values: image and notImage so we can test our custom scalar.

So our index.js should be something like:

if you now run npm start you will see something like this:

As you can see we have two values, they are both strings so GraphQL doesn’t care if it’s an image or not but we do so let’s start writing our custom scalar.

Writing your custom scalar

What our custom scalar will do is test if our link is actually an image and one way we can do that is to simply check if the link ends in an image extension but as you may imagine there are a lot of those so we are gonna use a tiny library that contains most of these file extensions and you can find on npm.

After installing it let’s start writing our function that will test if a value is actually an image:

What we are doing here is getting the image extension with path.extname and removing the first character as that is the dot. After this, we see if the extension we get back is part of the known image extensions and if so we return the value given to us otherwise we return null.

Our function is done and now we need to actually create our custom scalar and for that, we need the function GraphQLScalarType from graphql and then create a new GraphQLScalarType and for that, we need a couple of things.

• Name — The name of our type and in my case, I will name it image.
• Description — This is where you create a small description of what your type validates.
• serialize — This function receives the value we receive in our GraphQL query and this is where we do the actual validation to check if the value is an image. If it is you can return the same value and if not we should return an error that explains to the user what happened. This is the only mandatory function.
• parseValue — This function is the first one we get and it serves the idea of allowing us to clean out our value and serve it as we want to the serialize function.
• parseLiteral — Serves the same point as parseValue but this one receives the AST and not just the value so it also gives you access to things like what kind of value it is.

The parseValue and parseLiteral functions are needed if your Scalar is also an input type.

In our case, we are going to use the serialize function to see validate our value but the same principles of validation apply to all of them.

As you can see we assigned our Scalar to a constant and instantiated the GraphQLScalarType class.

As for the name I called it Image and gave it a small description and as for the serializer function I get the value and run that value through our isImage function that will either return the value back to the user or return null.

In order to use our custom scalar, we need to do two things first.

We need to define it in our Resolvers like so:

And also call it at the beginning of our type definitions like so:

If you now try to run our query you will get null in the notImage like so:

Adding Errors

This is all good and we now don’t return the value but it would be better if we could return an error that would explain to the user why that value didn’t come back.

We can do that by importing GraphQLError from the graphql package and use it as we would use the Error function in JavaScript.

Instead of returning null let’s now throw the error in our isImage function:

If you now try to run the exact same query you will get an error either saying that it’s not a string or not an image depending on what you passed to the resolver.

If you run it now you should see a new array of errors after the data:

Awesome! We created our first Scalar and used it to validate Image links.

You can see the finished code here:

If you wanna see more examples I suggest looking at the source code of libraries like graphql-scalars and see how they handle the validation.

Photo by Blake Connally on Unsplash

Written by Sara Vieira — Developer Advocate at YLD.

Interested in GraphQL? You may also like:

• Easier GraphQL wrappers for your REST API’s
• The new Apollo Server is 💯

Create custom GraphQL types was originally published in YLD Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

A very common use case for building GraphQL API’s is to wrap REST API’s for a better experience in the Frontend and also some more type checking in our backend.

Apollo knows this so there is a package to help with this and it’s called apollo-datasource-rest. It’s strong points is that it handles some of the caching for you as it runs through their cache and also it exposes a class that makes it easier for us to keep our code clean.

If you wanna follow along you can start with the starter ApolloServer sandbox on CodeSandbox that you can find here.

Wrap our REST API

For this example I am going to use the RandomUser API and we will create two queries. One for getting one random user and one for getting a set of users.

So let’s start by defining our Schema and it should look something like:

Some of the return values from the API I don’t really want to return so I will ignore them.

Now let’s create our class where we will use apollo-datasource-rest and in here the first thing we need to do is to extend the RESTDataSource class that the package exposes to us.

In it we have a constructor where we can define our base API url. Our file should look something like:

Now that we have the basis of our class we need to define our functions and they will all have a signature close to this:

So we create async functions that will fetch our data, give it any parameters that we want and from the parent RESTDataSource we have access to some methods to interact with API’s.

Besides the get method we also have the normal methods to allow for POST, PUT, PATCH, and DELETE requests so you can build any type of request to your REST api.

Let’s create our function to get one single user:

Now that we have this we can use it in our resolvers.

Using our data sources

Moving back to our index.js when we initialise our ApolloServer there is an option we can pass called dataSources and that goes after our resolvers definition.

This property takes a function that will return an object with all your dataSources so in our case our new ApolloServer instantiation will now look like:

By passing it as a dataSource we now have access to it on all our resolvers as part of the third argument so in our resolver to get the user we need to call the function we created in our class like so:

If you now try to run the getUser query like so:

You should already see some data

Let’s now code our getUsers function and in this one let’s also allow the user pass the number of users they wants to receive.

The endpoint for that is: https://randomuser.me/api/?results=number so let’s code our function with some sensible defaults:

So here we get a variable called people and assign it a default of 10 so if the user doesn’t pass a the argument we will just send 10 random people. This feature is called Default Parameters and you can read all about it at MDN.

Let’s now add a new function to our resolvers for query:

In here we use the second parameter of the function and that’s because we get whatever the user passed as a parameter to the query.

If you now run something like:

You should get three random users.

Wrapping up

In my opinion this is a more elegant way of wrapping our REST API’s as we have a clear definition of what we are doing in each function and also we get Apollo to take care of all that’s not the actual fetching and modelling of our data.

If you want the see the full coded example you can see it here:

Photo by Fancycrave on Unsplash

Written by Sara Vieira — Developer Advocate at YLD.

Interested in GraphQL? Read more about it:

• Create custom GraphQL types
• The new Apollo Server is 💯

Easier GraphQL wrappers for your REST API’s was originally published in YLD Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

I grew up mostly average class, I was never not eating poor or anything but I never had big stuff mostly because my parents couldn’t afford it. I never even flew until 2014 and that was for my first conference so most of the my vacations were camping and stuff like that and I always saw conferences as the real vacations where I could actually travel places. Up until last year before joining YLD I made 16K a year soooooo … not a lot of travelling was possible.

I’m not saying this for you to feel sorry for me, don’t do that, I had a fucking awesome childhood and I still love camping. I am saying this for the rest of the article to make sense.

For as long as I can remember my mom makes minimum wage and that is 580 euros in Portugal so I have been pretty aware of how lucky I am to be able to make waaay more then she does sitting at a computer, doing what I love and getting shipped to free trips. I was also always brought up to accept things when they are free because I couldn’t afford them if they weren’t.

In the beginning that’s what you see. You see free places to go where you can share your nerd passion with other people that are just excited as you. You can make friends like you and not feel bad about talking JavaScript stuff during lunch and it’s fucking amazing because you feel like you belong and that is like a drug.

Also someone literally emails you and tells they like the way your present and want to fly you and pay for a trip in exchange for you talking about something you love … Who the fuck would say no to that?!

Me apparently!

What happened?

I find it funny that a lot of people envy me but most of the people who don’t are people who travel for work too. Traveling is amazing … Until it’s work.

I find it really hard to say no to things, due probably to my low self esteem I insist on saying yes to things when asked and so I got myself in about 50 conferences and meetups this year.

Some people can look at this and say this isn’t healthy and some people just see how lucky I am to be invited to these things and don’t take me wrong I am very lucky but doing this takes a huge toll in you as a human.

The person who got really excited to get on a plane and travel somewhere new now forgets she has flights and wants to be home for weeks in a row.

If you travel this much you don’t really have a home, your home is everywhere and no matter of how much of a digital nomad you consider yourself to be you need a home, you need somewhere where everything is okay and you just feel like you are home.

I didn’t have that for so long, I am trying to make berlin my home but I honestly don’t even know how to do that. I am so used to living out of hotel rooms and airbnbs that I honestly don’t know how to make somewhere feel like home anymore. This feeling struck me really hard, I felt homeless, I felt alone.

A lot helped to this feeling, one of the things is that I mostly travelled alone and that sometimes is a good idea but not always, there are talks or days where you need a friend to cheer you up and no one is there.

That’s the thing about travelling. It’s all fun because that’s what you show but no one is there when you crying in a hotel room because you feel so alone. No one is there when you feel so overwhelmed by all the things you need to do that you literally want to cancel everything. Most people care about the good part not about this part, they don’t understand this part. Most people don’t understand how something so “good” can break someone inside.

I don’t blame them, it’s hard to understand how someone can LITERALLY complain about getting free shit!

Nothing is free though, everything has a price. Every time I do a talk I am shit scared that someone will ask a question that will unmask me as a fraud or whatever because imposter syndrome is a bitch. Every time I get on a stage I still get nervous and shake everywhere. Doing this over and over has a price on your brain, on your health and on you in general.

Not just this but also many times the fact that when you go somewhere like this you are expected to be out of your comfort zone, you are supposed to socialize with people 24/7 and that’s not me. I feed on alone times, that’s how I get my energy and being somewhere all day where I have to interact with people drains me inside mainly when it’s somewhere you don’t know. You can’t go home. Even if you want to badly you can’t just disappear and go home because that’s not how the world works no matter how much you want it work like that sometimes.

It’s funny because when I was starting I always looked at conference people like the awesome ones, those who had their life figured out and I always assumed that if I could do that, I would feel awesome and I would feel like I had my life figured out. I learned the hard way that having people clap for you doesn’t actually make you feel better about yourself when you are alone.

Are you cancelling every conference?

No. I cancelled some and will be more careful about the ones I do in the future, I will take my health and happiness more into consideration. That doesn’t mean I’ll stop that just means I won’t drain myself to the point of having to write one of these again. I still love conferences but like everything in life it needs to be in moderation.

I hope this makes sense to someone and I hope the next time someone travels a lot for work you don’t just look at them and think how lucky they are.

I hope next time you ask them how they feel. Sometimes just hearing someone ask that helps more then you can ever imagine.

—

If you made this far here is a meme:

The dark side of conferences was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

First thank you to Simona Cotin and Super Diana for answering the noob docker and nginx questions and reminding me that nginx is better for static files than node. Also thank you to the amazing humans who built a Docker extension for VSCode.

One of my main frustrations when it comes to Create React App, or really any frontend app that is served statically without a server backing it, is that your routes are now gone. You can access them from inside the app and go from page to page but if you try to access a page directly well… This happens: https://isthereuber.in/leiria

This is not okay, I know the website is static but the user doesn’t need to know.

Nginx to the Rescue

We will now need to create a nginx configuration for our server. The reason I choose nginx over node is mostly because it has been proven to be faster for static assets but you can totally do this with node.

A configuration file for nginx is a nginx.conf file so let’s start by creating that file and start coding it:

This is a pretty standard configuration for nginx and we tell it where to show our files and what the cache expiration date is. There is also some helpers for 404 and logs.

We don’t enable gzip here but for an example with it you can look here.

Docker time

Now that we have our nginx config we can now create our Dockerfile and we will start by stating what is the base image we will be using:

After this we need to tell docker what it needs to run our app and in this case we need to do three things:

• Copy the build folder over to /var/www
• Copy the nginx.conf to it’s folder in /etc/nginx/
• Expose the port 80 to the public since that is the one we are using in the nginx config

Details on how to do this are below:

Now to finish our Dockerfile we need to tell it what command to run and for that we will the nginx cli and pass it as the entrypoint in our Dockerfile:

As you can see we run nginx with -g daemon off; so that nginx stays in the foreground so that Docker can track the process properly (otherwise your container will stop immediately after starting). You can read more about this here.

You can now build and tag this image with:

And then run it with:

If you use now you can just deploy this as it is and now will build and run the image on their own servers.

We now have static routes on our static projects! If someone hits any route on your webapp this will be redirected to index.html and your app will work flawlessly.

This is the webapp I used to test this approach: https://github.com/SaraVieira/rick-morty-random-episode

https://rick-morty-random-episode.now.sh/

Routes 🎉

Photo by Marten Bjork on Unsplash

Written by Sara Vieira — Developer Advocate at YLD.

Interested in React? Read more about it:

• Rolling your own Redux with React Hooks and Context
• Create custom GraphQL types

Deploy your Create React App with Docker and Nginx was originally published in YLD Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

A couple of months ago I spoke about something in my brain that haunted me for years, I did a talk about mental health and panic disorders at Agent Conf and if you relate to this in any way here is the video:

I can never thank the agent conf team enough for letting me do this talk, allowing me to talk about these subjects in a tech conference and supporting me each step of the way.

After this talk I have been invited to speak at three more conferences about this topic and it’s the talk I would travel the most to deliver and raise awareness. However, this particular talk is not what I am here to discuss but the feedback I got about it to the present day and how I am doing coping now.

This feedback stuck with me:

You’re normalising having a broken brain & helping people realise that they can make it despite that. by ScribblingOn

The feedback part

This is exactly what I wanted, my talk was not supposed to cure anyone, my only objective was and still is to make people aware that they are not alone, that being broken is not something you have go through alone.

I want everyone to know that no matter your background this can happen to everyone and that you should ask for help, you shouldn’t be ashamed like was.

And I got plenty of people that DM’d me or personally thanked me because they were scared of what was going on but felt alone and didn’t know who to tell or what to do, and that I helped them get out and find help. This is the best thing I could have ever heard. Like I said in the talk I don’t care about looking stupid (point in fact: https://meme.iamsaravieira.com) as long as it helps one person feel less alone. To this day I believe this talk was the best thing I did in my life.

I also got some feedback from people saying that that I pretty much explained their life in this talk, that they had problems but didn’t know what was wrong and this was the best way to make others understand. Repeating myself, this talk is the best thing I’ve ever done because it actually helped people, not in coding like most things I do but in life! It crossed the boundaries of programming languages and even professions and got people united, relating to the situation and the feeling of being alone. It made them realise they are DEFINITELY not alone and that we are all in some way suffering from something no matter how we sound and look.

Chapter 2

Ever since I was a kid I always hated being the spotlight. I know it’s weird since I speak at conferences and appear as someone who speaks very loudly. Firstly i will explain in this “piece” why do i hate being the center of attention, and about being loud, that can be easily explained with the fact that I have terrible hearing.

After doing this talk I had people tell me they look up to me and that, to me is the weirdest thing ever since to my own views I am still broken.

One thing I think I made across with this talk is that all is fine now because I fixed one problem I had. But never assume I’m not still broken, in different ways that don’t impact my life the way the panic attacks did before, yet still broken.

I still live with depression, I have bad days where I don’t find solace or see the point of things and the saddest thing is that sometimes I look at my own talk just to remind myself what I have accomplished or read some feedback and feel so much better.

This depression leads to me having incredibly low self esteem, I don’t believe myself to be worth of pretty much anything, in my head I got all the jobs I had up to this day out of being lucky and just going through the cracks and I am just waiting for the day someone finds out and outs me. #imposterSyndrome101

I have this belief that in reality high school never ends and the way you were treated in those years has a big impact on how you perceive the world and yourself. I was made fun in high school like many of the grown up nerds, first mainly because I stuttered a lot and was also a small little ball, as in, I was 1.38m(4.5 to the US) and was a bit large around the sides so kids picked on that.

After a while this all was fixed but at the same time the gay situation happened and I went to a catholic high school, you can imagine high school was never fun, also when I was school I failed math twice in my senior year.

This all led me into me believing I don’t deserve all I have. This also led me to think I was put into a position where everyone is smarter than me because I was beaten down in school and home for something I couldn’t do anything about and y’all went to university, y’all didn’t fail math.

So why do you do talks and workshops ?

Brains are weird! No! Brains are really fucking weird!

If you do talks and workshops people think you are smart! Simple as that, the more talks I do the more people think I am smart and maybe if enough people believe that I am smart I will too!

People have different approaches to depression and low self esteem, some people hide and I do the opposite because hanging out with your brain alone is not something really healthy for everyone.

I guess the point of this article is to always know it’s okay to be broken. It’s okay to talk about it and doing something about it.

It’s not my fault my self esteem is super low, and your broken brain is not your fault. Normalise this shit and we will all be better humans and be much happier with what we achieved and are to achieve in life.

Many people starting out get overwhelmed by all the things happening in the React ecosystem. There’s this idea that what happens in React is magic and that getting started with React is super complicated unless you use tools like create-react-app.

And honestly, it’s not as widely documented that you only need 5 minutes to actually inject React into your page. Dan Abramov has been trying to raise awareness to this and he’s been doing an amazing job, so taking from his idea let’s make you believe the 5 minutes statement.

But how do I inject React into my application?

Well, first step is finding the files to insert, and these can be found at UNPKG. This is like a giant CDN of all the awesome libraries and frameworks around the world.

If you go to the URL https://unpkg.com/react@16/ you will see all the contents React has and in there you have two folders:

The folder UMD(Universal Module Definition) is the one we want as this one is understood by the browser without any bundler.

You need to also go to https://unpkg.com/react-dom@16/ to get the URL of development version of React Dom as we also need this library to make our project work.

The two links are:

• https://unpkg.com/react@16/umd/react.development.js
• https://unpkg.com/react-dom@16/umd/react-dom.development.js

Curious about the cjs folder?

The cjs folder is for use with NPM and the one used when you import react with npm and cjs means CommonJS and is also what is used is used in node for example.

Creating our HTML file

To start we need an initial HTML file. I use VSCode, so here, to create a simple HTML file you just need to type !and then tab and you will have a starter file to insert the two links with script tags. Mine looks like this:

Let’s now write some react code!

What is JSX?

JSX (JavaScript XML) may look confusing and magical but in reality it’s just some syntax sugar over the React.createElement function. If we don't want any type of npm or webpack magic we can just use this function that has the same effect so let's take a look at it.

Knowing this, we can create a simple div that has some text inside and a class to be styled in CSS, like so:

If you reload the page, nothing will happen. This is where react-dom comes into play because react itself can be rendered into a lot of places, like native apps for iOS and Android, TV's, PDF and really anything you set your mind to.

react-dom is the library we want in order to render it into the web and then we need the ReactDOM.render function. This function takes two arguments:

• The element we want to render. In this case, that’s is our wrapper function
• Where we want to render it to. In this function you can render it straight into the body but I would always advise to create a new element like a main and render it there. To get this element we will use document.querySelector and pass it our #app.

In code this would look something like:

If you reload the page, you can see our wrapper but it doesn’t really look nice so let’s add some CSS to it:

And now you should see something like this when you open your index.html in your browser:

So we got the basics of showing an element and now let’s get into some more interactivity by using React’s Component State.

Creating some interaction

In this part we are going to create the best App ever. We will get a dog photo from https://dog.ceo/api/breed/akita/images/random, show it on the page, and also add a button to refetch another dog photo. Trust me it's going to be great!

The first thing we need to do is to make our function be a React.Component. The main difference for us is that these Components can hold state and the functions can't.

The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object. — via reactjs.org

We should also consider that if we attach this state to a rendered element, this element will update once the state changes.

For our use case we will need am image property in our state that will have the source for our image. So our Wrapper should look something like:

Wow! So this changed a lot so let’s through what is going on:

We now have a class instead of a simple function, you can read more about classes on the Mozilla Developer Docs. We also extend out of React.Component, which means that React.Component is our parent class and we inherit methods from it.

The constructor method is a special method for creating and initialising an object created with a class. There can only be one special method with the name “constructor” in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method. - via developer.mozilla.org

A constructor can use the super keyword to call the constructor of the parent class.

After creating our base class we set the initial state that will be changed with this.state = { image: null }; the reason this is null in the start is because we don't have an image yet. Then in the render function we return the HTML element react will create for us.

Next step is creating the image tag that will have our awesome puppy:

We have seen this pattern before when creating our Wrapper component. The only thing we changed here from our Wrapper component is that we now receive an argument with all the props passed to the element. In the props object there is a parameter called source and set that as the src attribute of the image. We also don't pass any children as images don't really have any elements inside them.

Now for the button we do something similar:

Here we receive the a function that will be called when this button is clicked and will get another random puppy.

Putting all of this together

We have all the pieces and let’s now get this all working together in our Wrapper component by attaching these two elements to the Wrapper class and it's state.

To place these two elements as children of the Wrapper, we need to pass them as the arguments of the React.createElement function. Any argument after the second one will be seen as a children by React.

Our Wrapper will look something like:

Now it’s time we actually fetch the image and for that we will use the fetch api provided by most modern browsers.

Let’s do that in a separate function and call it when the component mounts on the page:

First thing we did was create a getImage function and in that function we get the image. When we got it we called setState, which is how you change the state of a component in React. Assigning the state to a new object won't work because React won't re-render the component.

In componentDidMount we called the getImage function we just created and this will populate this.state.image. That we can pass it to the img element and show our new puppy. We also pass our getImage function to the button so that the user can request a new puppy.

The bind in the constructor is done because functions have their own scope and not the scope of the class it's a part of. When we have a function like this, the value of this is no longer the class methods like setState but it's instead the own function. The this keyword is confusing when you first hear about so you can read more about it in the Mozilla Developer Docs.

We can do two things, we can bind it manually with this.getImage = this.getImage.bind(this) and this will change the scope to be the class. Or we can use arrow functions as these ones have no scope. In this case, for clarity, I decided to go with the first one.

You can see a live version of our awesome website here: https://react-no-jsx.now.sh

Also the code here: https://gist.github.com/SaraVieira/c99fd3ff7177b86c14209df92483f784

I want some magic!

So you want some JSX ah?

I like you! You live on the edge! I would say that to start you can go on the Babel’s online playground and play with it a bit. Once you understand it and want to apply to this exercise without much setup you can follow this guide by the react team.

After this you can start playing on codesandbox that offers the whole environment online.

Adding JSX to a project is just like adding a CSS preprocessor. It’s a single command you can run to convert all your script tags. You don’t need to install webpack or similar tools.

Conclusion

Hope this cleared some of the magic React sometimes feels to have and got you excited about it. Even if you already know React I hope this has taught you some new fundamentals you might not be aware of.

Go and build dope stuff with React! ⚛️

Thank you to Dan Abramov for bringing this to light!

Thank you to Carolyn Stransky and Carlos Vilhena for reviewing my horrible grammar !

Also Thank you to Artem Sapegin for the awesome photo

Written by Sara Vieira — Developer Advocate at YLD.

Interested in React? Read more about it:

• Rolling your own Redux with React Hooks and Context
• A tale of React Server Side Rendering

React is just JavaScript was originally published in YLD Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

On the 15th I was at GraphQL Europe and I want take some time to talk about the new release by the awesome apollo team that was announced there with a talk by Peggy Rayzis about the new Apollo Server.

You can checkout the slides she used so you can get an idea of the new server.

Peggy Rayzis 👩🏼‍💻 on Twitter

Apollo Server 2.0 is officially out of beta! Learn about all the latest features and what's in store for the future in my talk from @graphqleu. 🚀 💻 Slides: https://t.co/az1ev3GLmH 🔗 Repo w/ learning resources: https://t.co/Ezx62TeGY0

In this article I’m going to focus on how to get started with it.

How to get started

First step is to create a folder and initialise npm in it so that we can install the apollo server dependency:

All that -y does is skip all the questions and give you a shinny new project to start with. Let's now install our dependencies:

We need the apollo-server@rc to get all the new shiny features, graphql because, well, we are working with it, and I am installing random-id to give us an easy way to create random and unique IDs.

Our Data

In this example, I am going to use a movies array that we will query and mutate. So our index.js should look something like:

If you’ve never met me you should know I love horrible movies.

In this code we are importing the server and the query language(gql) from apollo-server and then importing random-id.

As for our data we have a list of two movies that have an ID, title and a year. With this we can start defining our types.

The Type Definitions

So, our id will be of type ID, the title of type String and, our year of type Integer. So we can start by adding that after our movies array, and also a root query for all movies that will return an array of movies:

Awesome! We already have a small query to work with so now let’s start adding the resolvers.

The resolvers

This is where the magic happens. You give an argument to GraphQL and in the resolver you tell it how to resolve that to actual data.

In our case we need to resolve the Query movies to return the array of movies we created at the top so we need something like:

As you can see the names need to match for graphql to know where to get the resolver from.

All done, we can now start the server 😄

Start the server

For this we need to create a new instance of the ApolloServer and pass it our typeDefs and resolvers. Then we need to listen for the server to start and just for convenience let's also log out the url.

Now by running node index.js in your terminal you should see this in the browser:

Now when you run the query:

You should get something like:

Don’t forget that your ids will be different as we are using random-id.

Awesome! We got something returned but it’s kind of bland, it would be great if we could get a movie by id right?

Let’s code that!

Queries with parameters

First, we need to update is our type definitions to add a new one: a query that will receive an ID as a parameter and return a single movie. So our schema will look something like this:

That ! after ID means that it's a required field and that the query will return an error if not present.

With the type definitions updated, let’s now create our resolver and in there we can use the find method in JavaScript to get the first item that matches the id we got in the parameters.

Let’s take a look at this function and go over the parameters it receives. The first one as we can see is not used and that one is the parent but since this query is a first level query we don’t need it. In the second parameter we get all the arguments the user passed and from that I deconstruct the id so that I can use in it the find.

If you restart the server and try movie query with an ID, you will see that it returns one result.

This part is done and we can now pass parameters to our query and drill down the information we need.

Mutations

In this last part let’s go over creating a mutation that will add a movie to the array.

A mutation in it’s essence is the same as a query, what matters is what you do inside the resolver, the difference in name is for us to make more sense of our code.

In our type definitions we need two things. First we need to create a new Type called Mutations and this is where our addMovie Mutation will live.

Then inside this new type we create the add movie mutation that will receive two parameters, the title that is a String and the year that is an Integer and after the movie being created it will return that exact movie.

Returning what you created or deleted is a good practice in GraphQL.

In schema definition language that looks something like:

That’s all we need for our type definitions.

For our resolvers we need to think that we are really only modifying an array. That means we can push an new element to it with the two parameters the user passed and a generated id into movies and it will reflect in the array.

As you can see we defined a new movie with what the user gave us and a random id, we then pushed that to the movies array and finally returned what the user created.

If you restart your server server an run a mutation like:

You should get your newly created movie in the right side and when you run the movies query you will now have 3 movies instead of 2 and that means the mutation worked and you got a functional Apollo Server in about 60 lines of Javascript.

The Code

You can checkout all the code used here: https://glitch.com/edit/#!/apollo-server-2-dope and since glitch is amazing you can even play with it here: https://apollo-server-2-dope.glitch.me/

Have fun with GraphQL and build amazing things ⚡️

Thank you to Sérgio Ramos , Carolyn Stransky, Carlos Vilhena and Tamlyn Rhodes for reviewing my blog ❤️

Written by Sara Vieira — Developer Advocate at YLD.

Interested in Apollo? Read more about it:

• Using Vue.js with Apollo
• React is just JavaScript

The new Apollo Server is 💯 was originally published in YLD Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

I want to start by mentioning that as of starting this I didn’t have a lot of experience with SSR besides adding styled components in a NextJS app.

What’s the story here?

So I have this website I created called https://awesometalks.party that was being rendered on the client. I was having issues with SEO and I also wanted to be cool of course and render it on the server for performance and coolness bonus.

I did this using Razzle that is this really awesome tool and this meant that I had a server.js that ran on the server, an app.js that was isomorphic and also a client.js for all your client needs.

Here is an example of the most basic server you can use with Razzle: https://github.com/jaredpalmer/razzle/blob/next/examples/basic/src/server.js

Before you call me a noob, that I am, I want to say that this project was not just a React project but it also included several things that needed to be SSR’d as well, like:

• React Router
• Font Awesome
• React Helmet
• Styled Components
• React Apollo

So we are going to start with the ones that went super smoothly:

React Router (AKA: At least Michael Jackson loves me)

React Router is the best, we all know that but what I didn’t know is that server side rendering it didn’t involve a single tear and it was by far the fastest one to do so. All you need is to spread the magic over three files.

So in your app that is isomorphic you place all the routes but without the actual react-router provider like so:

In the actual client.js you place the provider since this will only run on the client but the routes are for everything:

Why isomorphic-fetch? You never know in these things!

What about the server? Well you just have to wrap your component to be SSR’d in a Static Router and that is about the only change you need to do:

That’s it! Those are the only differences we have to make in the server.js to get React Router working on the server as well 😀

Font Awesome (Yes, it needs SSR otherwise weird stuff happens)

I actually didn’t do this one, it was a PR but I have no idea where there are docs for this, but ok.

Font Awesome was implemented in a way where only the icons we needed were imported and added to the library so that everyone doesn’t get a 3mb icon font.

There is a icons.js with:

Notice the config where we tell font awesome that we will add the CSS and instead of it being added by the fontawesome package automatically. After that, this file needs to be imported into our app.js, but on this side, that is it. You just need to know that this config exists.

Then on the server some markup had to be modified for us to add the actual CSS:

By adding <style>${fontawesome.dom.css()}</style> we now have perfect icons on both the client and the server and we can carry on.

Here is a link to actual PR.

React Helmet (GOOD DOCS ARE IMPORTANT)

Their docs are actually very good so you can see them here but what you need to change on the server is:

There are no changes needed on the client and your SEO will be on fleek from now!

Styled Components (css-in-js team)

These docs are also pretty amazing so let’s start by the changes in the server. First thing we need to do is wrap our root component in their theme provider because I am also using themes with styled components, so our root components will look like:

After this provider component has been added to our root, we can follow the docs that tell us to create a new server stylesheet, collect the styles of the Root and get the style tags so this means we need to add this code:

And now add these tags into the response we send to the client:

Now a word of warning: I also had some globally injected styles for the body and general clean up of the page and these were being ignored by the SSR.

This was happening because I was importing them in the client.js instead of the app.js and this meant it only ran in the client.

If you have any type of global styles make sure to import them in the isomorphic part of the app like so:

And you are all set for styled components and now Apollo !

Apollo

I love Apollo, I do, but this was a pain also because I started with Apollo Boost just to make the config easier but then hit a wall and had to download all the packages.

Let’s start by getting the place where we create the Apollo Client away from the main initial files and put it into a file that in my case looked something like:

And now you are thinking: What is this process.browser ? It’s just a way of figuring out if we are on the client or the server and render accordingly.

So we will initiate the ApolloClient with no devTools and in SSR Mode and then those will be switched.

And now comes this cache thing. So the way Apollo handles SSR is a little like styled components does where it gets all the things you are fetching in the page and dumps it in the dom so what this restore function does is look for the variable window.__APOLLO_STATE__ and restore it as the cache for the client as well. But we haven’t gotten this to work on the server so for now nothing will happen.

On the server there is a bunch of stuff we need to do, first thing is wrap our Root in the Apollo Provider:

After this we need to use getDataFromTree and what this function does is get all the queries you have in your page and fetches them all and returns a promise, after this promise is resolved we can actually get the initialState and place it in the response like so:

And this is where Apollo gets the initial state we saw in the in the above code and like this Apollo will render everything like magic.

This is what I learned in the lengthy discovery to get the App running on SSR using Razzle and I hope this is useful to someone going through the same struggles into SSR and React Apps.

For anything more here is the Github repo with all the code: https://github.com/SaraVieira/awesome-talks/tree/master

Also feel free to reach out to me for any questions.

Written by Sara Vieira — Developer Advocate at YLD.

Interested in React? Read more about it:

• Deploy your Create React App with Docker and Nginx
• Rolling your own Redux with React Hooks and Context

A tale of React Server Side Rendering was originally published in YLD Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

I know it may seem weird that I am writing about Vue.js but honestly I really like Vue, I blame Sarah Drasner and her course on frontend masters but ever since I started getting the beauty of Vue and it’s something I use sometimes, like for the original of the ReactFest Conference website… I didn’t see the irony, I promise.

In this article we will be creating a simple list of names where we have one query for getting the names and a mutation that adds a name.

If you want to see what we are building or want to skip right to the code you can find it here:

Installing ALL the things

Thank you to Apollo Boost we just need 3 things to get started so let’s install:

yarn add graphql apollo-boost vue-apollo

My project also uses tachyons but that is not a necessity in any way so just these three packages are enough to do everything we want 🚀

Setting up vue-apollo

If you started with the vue-cli or Codesanbox you will get a main.js that starts our app, it imports vue and renders our main component and this is where we will add vue-apollo and all the config needed.

First thing is to import what we need from apollo-boost and vue-apollo:

After importing this we will initialise vue-apollo by passing a uri to the ApolloClient and telling vue to use vue apollo as a plugin.

Last step of our set up is to set up our provider to be the apolloProvider:

All setup is done and now we can start writing them queries.

Files

For this I used this file structure:

In the app.vue I just imported the Form component that will hold our mutation to add the name and the names component that will have all the names in our server.

My app.vue looks like this:

The queries.js file just contains all the queries we need to make requests to the server and the code is:

Let’s get them names !

Let’s start hacking our Names.vue and get the names.

First thing we need to do is import our query and also start our ApolloQuery component, like so:

First thing I did was import the GET_NAMES query from our queries.js file and set it as the query property on the data so that we can call it in our template.

After that I initialised the ApolloQuery component passing it the same query we just defined and this will return a template that get the result from the query as props that we can use inside it.

Inside this template let’s first check if it’s loading or there is an error and we do that by creating two elements that check for those propreties:

Now that we got ourselves covered and know that when the section is rendered we have some data we can start by just displaying a list of all the names that come from our server using:

If you try this code you see that we can indeed see the names in the page but there is a small problem we haven’t defended against, what if there is data but the server has no names ?

Right now we get an empty ul but we can fix this by checking for the length of the allNameses property in data and only if it has any names we render the ul, in the case it doesn’t we will just render a span that tells the user there are no names in the server.

Awesome we got our bases covered here !

In this case we didn’t need any variables but in case we did we just need to add a prop to the ApolloQuery component called variables that accepts an object with all the variables you need.

Add them names son !

Let’s move to our Form.vue where we will add our name to the server using a mutation.

First thing is import the mutation query from our queries.js and also create a simple form to hold the name the user inputs, your component should look something like:

So far we have a pretty standard form, it just has one input that has a model for some two way data binding and also calls a method on submit.

The .prevent you see after the v-on:submit simply tells vue to prevent default before calling the method passed so that we don’t have to that manually, a great helper !

Let’s create our method:

All we really doing here is saving the users input in a variable called name because we want to clear the input before we actually start the mutation.

To start the actual mutation we call:

As you can see we call this.$apollo.mutate and we are able to do this since we instructed vue to use the apollo in our main.js. In the actual call we pass in the mutation and also all the variables we need for the mutation to occur.

If you try to add a name now and then reload the page we see that our mutation occurs and we get the new name inserted but this is not the desired outcome, we should see the the added after the mutation is done and we can do that by updating the cache in an update function that vue-apollo provides:

In our update function we read all the names we have with our GET_NAMES query and then concat the name we just added to that array so that we can see the changes right after the mutation completes with success.

What if there is an error ?

We need to add a catch to our mutate function since this returns a promise. If there is an error we need to add the name the user tried to add back in the input and also populate the error key in our data object so that we can access this in the template and show the user the error:

After adding this to show the error to the user we just need to add:

<div v-if="error">{{error}}</div>

Somewhere in our template and if there is a mutation error the user will see the error with the name they wrote in the page, return the name to the input and also log out to the console the actual error.

Optimistic responses

We can stop here and the user gets a pretty good experience but in this case it does because I have a pretty fast internet and the server is also pretty fast since we are using graphcool.

However, if we had a really bad internet or the api was really slow we would have a moment where nothing happened and that may confuse the user. To fix this we can add an optimistic response, this will be something that will run and call the update function as soon as the mutation function runs instead of having it run after there is a success.

In this case we can add it at ease because it will be reverted and the catch statement will also run so adding this is a win win.

vue-apollo has a really handy optimisticResponse method in the mutate function that we can use to send a fake response and update the cache. In here we send exactly what we expect to receive from the server so we send:

Only difference as you can see is that we send a fake id as this one will be updated as soon as the mutation completes or this will be reverted if it fails.

That’s it, we created a simple interaction with apollo and vue 🚀

Conclusion

I also added another mutation that deletes an item in the code sandbox that you can take a look and inspect the code even better.

Hope this was useful, I see the React.js devs including me super excited about GraphQL and it looks like there excitement dies a bit in other frameworks but it shouldn’t as it keeps on being awesome dealing with GraphQL in vue because of the awesome vue-apollo !

Written by Sara Vieira— Developer Advocate for YLD.

Interested to read more? You may also like:

• The new Apollo Server is 💯
• A tale of React Server Side Rendering

Using Vue.js with Apollo was originally published in YLD Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.