Image for post
Image for post
Photo by Austin Chan on Unsplash

For the past months, I have decided to build one of clients’ system using GraphQL and there are a lot of new concepts for someone who mainly worked on building RESTful interfaces. In this article, I am going to discuss some of my experiences and gotchas when starting with GraphQL.

Before we got into, I want to mention that, our system was built using Graphene Django in backend and React with Apollo Client in frontend. Additionally, I will be talking mainly about the environments instead of what GraphQL actually is.

The Positives: Frontend and Apollo

Connecting frontend to a GraphQL backend using Apollo Client was a very fluid and straightforward operation. There are two very powerful features of using Apollo — the link system and the in memory cache. Let’s talk about the link system first. Apollo’s link system allows integrating custom functionalities into the “Network Stack” of the frontend application. What I mean by “Network Stack?” Apollo Links live in Apollo world. They do not really interfere with the default flow of application. For instance, we were using OAuth2 to authorize the user with the authorization server. In OAuth2, after you receive the token, if the backend allows it, you can reclaim new tokens using a refresh token. When writing frontend code, if a backend responds with an authorization error (e.g “Token expired”), we need to make a separate request to the authorization server to retrieve a new access token using refresh token. In a typical frontend app you can set up this flow using promises that will look like it is just one request. However, with Apollo, I just created a link that performed refresh and resend the request to get the data across. When I added the new link, I did not need to make any changes to accommodate for the new functionality (yes, I added dialogs to show that the authorization failed but that is besides the point). The application just thought of it as it is loading longer. Secondly, the in memory cache of Apollo is very powerful. When you update something in the backend, given the ID, typename (I assume), and the new data, the in memory cache automatically updates the the query data for the changes. There were some other cases where I needed to refetch the data due to sorting from backend but that those issues can also be resolved by sorting the data in both backend and frontend. …


Image for post
Image for post
Photo by Brook Anderson on Unsplash

Recently, I have written about fetching data using Hooks and Render Props. The purpose of that article was to fetch and display data. In this post, I would like to revisit that article and extend it with examples to show how to use the same concept to perform other types of actions (e.g POSTing data).

How do we abstract away data actions?

Whether you are fetching, updating, adding, deleting, or performing custom actions, all these operations have one thing in common. They all go through three stages— loading, success/data, and error. These three stages are building blocks of UI development. …


Image for post
Image for post
Photo by Artem Sapegin on Unsplash

React ekosistemi 4 əsas prinsiplərdən ibarətdir — Component, Props, State, və Lifecycle. Bütün əlavə konsepsiyalar (Context, Hooks, və s) bu prinsiplərin əsasında qurulublar və reallıqda siz öz ideyanızı yalnız bu prinsipləri bilib React-da yerinə yetirə bilərsiniz.

Biz bu yazıda bu prinsiplərinin qalan 2indən — State və Lifecycle-dan — danışacağıq. Component və Props üçün əvvəli yazını bu linkdən oxuya bilərsiniz.

Props haqqında qeyd

Komponent propları DOM elementlərinin propları ilə eyni ideanı daşıyırlar. Bu səbədən proplar komponentə yalnız kənardan (məsələn valideyn komponentden) göndərilə bilər.

State

State-in məntiqi props ilə eynidir. Propsdan fərqli olaraq state komponentin daxilində bir vəziyyət saxlamaq üçündür. …


Image for post
Image for post
Photo by chuttersnap on Unsplash

React ekosistemi 4 əsas prinsiplərdən ibarətdir — Component, Props, State, və Lifecycle. Bütün əlavə konsepsiyalar (Context, Hooks, və s) bu prinsiplərin əsasında qurulublar və reallıqda siz öz ideyanızı yalnız bu prinsipləri bilib React-da yerinə yetirə bilərsiniz.

Gəlin bu prinsiplərin ikisindən: Component və Props-dan danışaq.

Component

Component React-ın əsas blokudur. User Interface-də fikirləşə biləcəyiniz bütün vidcetlər, elementlər, və s. bir və ya bir neçə komponentin kombinasiyasından yaranır. Sizin User Interface-də görmədiyiniz "vasitəçi" funskiyalarda çox vaxt komponent ilə abstraksiya olunur. React komponentləri yenidən istifadə ola bilərlər (reusable).

React-da iki cür komponent olur — funskional və klass əsasında yaranan (class based). 2018-ci ilin okyabr ayına kimi bu iki komponent növü arasında çox böyük bir fərq var idi. Funskional komponentlərə adətən Stateless deyilirdi, çünki bu komponentlərin daxili state və ya lifecycle metodları yox idi. Amma 2018-ci ilin oktyabrında React-a Hooks adında konsepsiya tədqim edildi və funksional komponentləri class based komponentlər ilə bərabər etdi.


Image for post
Image for post
Photo by Cameron Kirby on Unsplash

In most cases, applications that I work with just need to request data from the API and display the result. So, using a sophisticated library like Redux, only complicates the code and increases the bundle size without bringing much of a benefit.

Here is a simple application structure that contains all the needed parts of a “feature”:

/UserProfile
/api.js
/UserProfile.js
/UserProfilePhoto.js
// ...other files

The API is typically an async function that the the fetching based on arguments provided and the “main” component calls the API and renders the data. Let’s give a small example to make this clear:

// api.js …


Image for post
Image for post
Photo by Jonny Caspari on Unsplash

React yenidən istifadə edilə bilən (reusable) komponentler yaratmaq üçün framework-dur. Komponent sözü, komputer dünyasında geniş məna kəsb edir. React-ın fundamental arxitekturası bu ideya əsasında qurulub (hər şey komponent ola bilər). Amma biz bu yazıda əsas UI düzəlməsindən danışacağıq. UI dünyasında, komponent bir və ya bir neçə elementin kombinasiyasından yarana bilər. Məsələn, Modal, Card, Header, və s. bir neçə UI elementin kombinasiyasından yaranır. Amma bu maddələrin hər birinə müstəqilyenidə istifadə edilə bilən komponent kimi baxmaq olar.

Bu React və Komponentin qısa açılışıdır. Bu yazının mövsusu React-da necə kodlaşdırmaq deyil. Daha çox React-ın yaranmasının səbəbidir. React niyə belə məşhurdur? …


Previous Issue: https://medium.com/front-end-weekly/tested-react-build-and-test-modal-using-react-features-and-dom-events-39b7246a3a6f

Image for post
Image for post
Photo by rawpixel on Unsplash

“Tested React” series of guides to get people accustomed to testing components in React ecosystem. This series IS NOT about setting up testing environments for React — The goal is to help you build intuition on what to test in your React apps.

In this issue, we are going to build a Form that stores all input data in context; so that we can get the data during submission. The goal of this post is to test a component that works with Context.

Specification: Form

To keep this post simple, our Form consists of the following items:

  • Form…


Previous Issue: https://medium.com/front-end-hacking/tested-react-lets-build-a-data-table-a76aa100d23f

Image for post
Image for post
Photo by Alexej Алексей Simonenko Симоненко on Unsplash

“Tested React” series of guides to get people accustomed to testing components in React ecosystem. This series IS NOT about setting up testing environments for React — The goal is to help you build intuition on what to test in your React apps.

In this issue, we are going to build a Modal (or Dialog) component to get familiar with testing components that rely on Portals, Refs, and DOM events (Modal requires all these features!).

Specification: Modal

There are specific things that a Modal component must do:

  1. Render the modal in document body (using Portals)
  2. Render an Overlay over the whole page and create a content box for its children. …


Image for post
Image for post
Photo by Markus Spiske on Unsplash

“Tested React” is a series of guides to get people accustomed to testing components in React ecosystem. This series IS NOT about setting up testing environments for React — we will be using Create React App, Jest (comes with CRA), and Enzyme (needs to be installed and configured) for a nice interface to write tests to build and test our components. In this series, the goal is to help you build intuition on what to test in your React apps.

Before we get into the guide, I want to say something. It is okay if your tests are bad. It is okay if your tests fail and need to updated for refactoring. If you are uncertain about the quality or scope of your tests (e.g when you start a new project), it is okay. Eventually, you will make your tests better. So, do not be scared of testing because you will get it wrong. Just like anything in development, with more experience and clearer scope, you will end up writing better tests. …


When we start building our project, we always start being fine with client side rendering. However, there comes a time when we need to render it in the server-side for many reasons — performance, better search engine crawling (SEO) etc.

There are lots of tutorials and solutions for SSR but I honestly do not like the approach they all are taking. Ready to run solutions such as NextJS are usually opinionated which ends up being a painful experience to add certain features. Most guides that I have followed throughout the web are either way too complicated or just not “one-command deployable.” …

About

Gasim Gasimzada

Software Developer / Founder at Appristas / https://appristas.io / https://gasim.xyz

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