In the previous article I talked about security concerns around storing tokens in localStorage. I thought it would be worth exploring how to use
HttpOnly cookies when making requests from a React client-side app. This will include making changes to the Apollo Graphql Server to manage cookies from the client. In this post I will go through the changes needed to enable storing JWTs in HttpOnly cookies from sending headers.
This is the continuation of JWT for authentication using Apollo Graphql server and will show an example of how to send JWTs for each request from the client to the GraphQL server, and how to handle updated tokens when a user returns for a new session in the client.
This tutorial will focus on the key features needed to send and receive tokens, meaning there is no complete example output to try at the end. The aim is to help you integrate authentication into your own app.
This post will cover managing complex state at a feature level rather than the entire site. React hooks have enabled developers to have cleaner functional components which help to rationalise our component logic with ease.
useState hook, it’s one line of code that can be used to manage the state of a component rather than having to create a
class component with the addition of boiler code. This is great because we are keeping simple things clear!
However, there are features that are inherently complex as they could have many nested child components and need to alter the state.
What options are there to manage this complexity in React?
Stubbing a React component is easy with Sinon. You can replace a component with a Sinon stub which is rendered as a child in the component under tests.
Higher-order components (HOC) and render props are two ways to build cross cutting code in React JS. How do you decide to use one over the other?
In this post, I will discuss the why and how to use React JS Render Props.
Why use Render Props: Promote reuse of behaviour across React components.
If you have read my post on higher-order components this may seem similar. The React community has been working hard on solving reuse across components, and one common theme is passing data to children. However, we will focus here on how to use Render Props - and discuss the differences between HOC and Render Props in another post.
In this post I will discuss why and how to use higher-order components (HOC) with React JS.
Why use HOC: Promote reuse of logic across React components.
Components are the typical element for reuse in React but sometimes features don’t fit into this standard. There might be similar methods used to fetch data but maybe the display is different. An example of this is shown later.
As with any new tech it can be overwhelming and confusing how all the parts work together. Especially with the combo of Relay and GraphQL. Hopefully this post will help demystify some things in Relay.
Why use it: One typical issue found in an SPA are the number of network calls made to render a page. Quickly this starts to affect your server performance because the requests made can be high. Relay is focused around efficient network calls helping to mitigate this issue. Another good feature is the queries are close to the components making it obvious the data requirements.