Forem: Tomasz Kudlinski

Apollo Client 3.0 - Reactive Variables in Local State

Tomasz Kudlinski — Sat, 18 Jul 2020 17:34:32 +0000

I have just wanted to share one cool thing, which was recently announced with the premiere of Apollo Client 3.0 - reactive variables in local state.

I think it will insanely improve developer's experience when implementing local state using Apollo.

Below great example from the docs:

1. Define the query

Create local state variable called cartItems

export const GET_CART_ITEMS = gql`
  query GetCartItems {
    cartItems @client
  }
`;

2. Create reactive variable

export const cartItemsVar = makeVar([]);

3. Define policy for the local state field

Use created reactive variable as the source of cartItems local state field

export const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        cartItems: {
          read() {
            return cartItemsVar();
          }
        }
      }
    }
  }
});

4. Create component, which will update reactive variable

import { cartItemsVar } from './cache';
// ... other imports

export function AddToCartButton({ productId }) {
  const cartItems = cartItemsVar();
  return (
    <div class="add-to-cart-button">
      <Button onClick={() => cartItemsVar([...cartItems, productId])}>
        Add to Cart
      </Button>
    </div>
  );
}

5. Create component, which will query for local state field

export const GET_CART_ITEMS = gql`
  query GetCartItems {
    cartItems @client
  }
`;

export function Cart() {
  const { data, loading, error } = useQuery(GET_CART_ITEMS);

  if (loading) return <Loading />;
  if (error) return <p>ERROR: {error.message}</p>;

  return (
    <div class="cart">
      <Header>My Cart</Header>
      {data && data.cartItems.length === 0 ? (
        <p>No items in your cart</p>
      ) : (
        <Fragment>
          {data && data.cartItems.map(productId => (
            <CartItem key={productId} />
          ))}
        </Fragment>
      )}
    </div>
  );
}

Summary

After updating the value of reactive variable all queries, which relies on cartItems local state field will be automatically update. That's awesome!

Link to the docs

MutationObserver, IntersectionObserver, ResizeObserver - What/Why/How

Tomasz Kudlinski — Sun, 07 Jun 2020 09:02:26 +0000

During the life of web developer comes a moment when you have to build infinite scrolling list, react to the changes of the size of given element or its children or implement some behaviour dependant on the visibility of the object in the viewport. Observer's family can help you while working on mentioned tasks.

Background vector created by dooder - www.freepik.com

1. IntersectionObserver

What

thanks to it you can asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Why

You might use it in below cases:

Lazy-loading of images
Implementing "infinite scrolling"
Reporting of visibility of advertisements etc.

How

const elements = document.querySelectorAll('.elt');
const options = {
  root: null, // set document viewport as root
  rootMargin: '0px', // margin around root
  threshold: 1.0 // 1.0 means that when 100% of the target is visible 
  //inside the root, then observer callback is invoked.
};

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      console.log('in viewport');
    } else {
      console.log('out of viewport');
    }
  });
}, options);

elements.forEach(elt => {
  observer.observe(elt);
});

Link to the docs

2. MutationObserver

What

It will be helpful if you need to watch for DOM tree changes.

Why

MutationObserver will tell you when the DOM element's child was removed, added or any of attributes of any DOM tree elements was changed.

How

const element = document.querySelector("#element");
const options = {
  childList: true, // listen to listen to children being added or removed
  attributes: true, // listen to attributes changes
  subtree: true // omit or set to false to observe only changes to the parent node
}

const callback = (mutationList, observer) => {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
      case 'childList':
         // check mutation.addedNodes or mutation.removedNodes
        break;
      case 'attributes':
        /* An attribute value changed on the element in
           mutation.target; the attribute name is in
           mutation.attributeName and its previous value is in
           mutation.oldValue */
        break;
    }
  });
}

const observer = new MutationObserver(callback);
observer.observe(element, options);

Link to the docs

3. ResizeObserver

What

It reports about changes of the dimensions of the element.

Why

It can be useful if you would like to listen to changes of the viewport (portrait vs landscape) or just you have some external content and you would like to react to it changes.

How

const elements = document.querySelectorAll('.elt');

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const width = Math.floor(entry.contentRect.width);
    const height = Math.floor(entry.contentRect.height);
    // execute some logic based on width and height params
  }
});

elements.forEach(elt => {
  observer.observe(elt);
});

Link to the docs

Redux-Saga: What/Why/How + examples

Tomasz Kudlinski — Mon, 01 Jun 2020 09:47:16 +0000

What

Redux-Saga is here for you to help with side effects in your app, especially if those side effects are impacting your global state - Redux store. It is a redux-middleware, which handle async tasks with javascript generators.

Why

You can think of Redux-Saga as of separate thread, where in synchronous way a very complex asynchronous scenarios can be described. Thanks to this it is much easier for developer to read, understand and maintain complex async business logic. In my experience, I have learnt that Redux-Saga is more developer friendly (after you will learn it basis) comparing to Redux Middleware or Redux Thunk

How

In main.js file plug Root Saga from saga.js to the store using applyMiddleware function.

main.js

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import rootSaga from './sagas'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

// then run the saga
sagaMiddleware.run(rootSaga)

Your Root Saga just combine all other sagas (generators).

sagas.js

export default function* rootSaga() {
  yield all([
    firstSaga(),
    ...
    actionWatcher(),
    ...
    lastSaga()
  ])
}

Examples

Fetch data

export function* fetchData(action) {
   try {
      // make API call using `Api.fetchUser` function (could be fetch) for 
      // url stored in variable `action.payload.url`
      const data = yield call(Api.fetchUser, action.payload.url)
      // send `FETCH_SUCCEEDED` action with payload `data`, it will reach 
      // all reducers and sagas that are 'listening' to it
      yield put({type: "FETCH_SUCCEEDED", data})
   } catch (error) {
      // send `FETCH_FAILED` action to inform about error with API call
      yield put({type: "FETCH_FAILED", error})
   }
}

Execute logic after multiple actions

function* businessFlow() {
  while (true) {
    // wait for the ACTION_1
    yield take('ACTION_1')
    // ... perform the logic
    // wait for the ACTION_2
    yield take('ACTION_2')
    // ... perform some other logic
  }
}

Race

function* someTask() {
  while (true) { ... }
}

function* watchTask() {
    // `someTask` will be cancelled when CANCEL_TASK will be caught by the 
    // Saga
    yield race({
      task: call(someTask),
      cancel: take('CANCEL_TASK')
    })
}

Cancel previous call

If multiple GET_DATA actions will be fired, only the last one will be processed (all previous calls of fetchData will be cancelled)

function* fetchData() {
  try {
      const data = yield call(Api.fetchUser, action.payload.url)
      yield put({type: "FETCH_SUCCEEDED", data})
   } catch (error) {
      yield put({type: "FETCH_FAILED", error})
   }
}
function* actionWatcher() {
     yield takeLatest('GET_DATA', fetchData)
}

This was only short highlight of the Redux-Saga, for more check the docs

Project management tips for software development projects

Tomasz Kudlinski — Sat, 30 May 2020 07:39:25 +0000

If you are non technical person and you are managing team of developers (or maybe you are Scrum Master) you probably sometimes ask developers about their feedback about project situation and processes (maybe during the Retrospective meeting)… or maybe not… in both cases this article will be beneficial for you ;)

Background vector created by freepik - www.freepik.com

1. Slack or other modern communicator tool

Yes, the Slack, it can help you to make you developers efficient and give you (and your customers) more insight into the project.

a) Create channels/chat rooms for micro-projects

When you are building small feature on which 3 developers will work it is extremely efficient to create for it channel/group chat.

Keeping all technical discussion in one place help them to remember what decisions were made (of course it is a good practice to later document somewhere those decisions in more structured way, or at least part of them), onboard new developer in the micro-project quicker and possibility for you to quickly clarify the questions.

You may also add to it some of the customers (depending on your relation with customers). Developers can announce there key milestones of the project, share test environments or inform about deployment of a new version of the feature.

b) Create channels/chat rooms for frontend, backend, ios app, android app etc.

Those channels are for your project customers and people from your team that needs to be informed about the release of i.e. your backend. You can announce there new features, alert about the planning release (which could i.e. be breaking current version of the frontend) or show some statistics related to releases processes and performance.

2. Daily meetings

Scrum or not to scrum… it is always good idea to sync one time per day with all your developers and key team members. Let developer say about their problems, findings and/or just current work and cut the discussion when they want to talk about it for too long… they like to talk about it… if something needs longer discussion it should not be part of the daily meeting and only involve needed people. It is also good place to announce some major changes in the project (i.e. use of new language or library), introduction of best practises or that someone key for feature under active development is going for 3 weeks vacations ;)

3. Confluence/App where you keep your project's documentation

Keep your project features description in one place/document. Have source of truth for your project specification and when you are attempting to create a new feature (or improve current one) firstly update this file and link the change for it in the ticket for the developer. If you have many features at some point you can forget about some small details… and you really do not want this to happen.

4. Tickets

When you create ticket with the description for the developer try to use IF THEN descriptions, like:

IF user clicked red button THEN modal showed up.
IF user swiped left THEN he/she was forwarded to the previous screen.

It is easier for developer to translate such a specification into unit tests or QA engineer to e2e tests.

5. Tests

Yes, your project needs them. If you have small team and not that much time start from introducing snapshots tests for your feature components or screenshots tests, they require less time for maintenance after being setup.

If you developers have more time (and/or you have QA Engineer in the team) add e2e tests to your project to better simulate user interaction with your app.

Depending on your project scope and developers number/seniority you can add of course unit tests.. unit test are fast to execute, but it take time to create them and they are less customer focused comparing to e2e tests.

6. New, fancy tech/library in your project

If you have good developers on your team they will try to introduce some new cool libraries to your project… obviously not everything should be introduced, but try not to kill their spirit of learning and trying new things.

Developers wants to stay in the teams with good tech stack and among other developers who try and easily pick up new tech. Maybe you should gave them some time to build custom project for the company, open source something or organise hackathon.

I hope this article will add some value to your project management best practices! Good luck!

React-Redux - add second store to your app

Tomasz Kudlinski — Wed, 27 May 2020 19:24:44 +0000

You may encounter situation when you need second Redux Store in your app. Wait what? Isn't Redux a single store architecture...?

Yes it is, but maybe you have to extend existing application and you would rather not to interact with existing Redux Store.

Wit react-redux you can create new Store, which will be using separate context:

import React from 'react'
import {
  Provider,
  createStoreHook,
  createDispatchHook,
  createSelectorHook
} from 'react-redux'

const customContext = React.createContext(null)

export const useCustomStore = createStoreHook(MyContext)
export const useCustomDispatch = createDispatchHook(MyContext)
export const useCustomSelector = createSelectorHook(MyContext)

const customStore = createStore(rootReducer)

export function MyProvider({ children }) {
  return (
    <Provider context={customContext} store={customStore}>
      {children}
    </Provider>
  )
}

You can find docs about this solution here

'as const' in Typescript, better constant object support in IDE

Tomasz Kudlinski — Sat, 16 May 2020 18:46:17 +0000

In most projects we have some kind of global config object. You may store there urls to API endpoints, constant string values, default values of parameters for some external scripts/services etc.

Example of the global config object:

const config = {
  a: 84595,
  b: 'some string',
  c: {
    items: ['item1', 'item2', 'item3'],
  },
}

If you are using Typescript in your project with modern IDE (like Visual Studio Code), you will get below feedback from it:

const config: {
    a: number;
    b: string;
    c: {
        items: string[];
    };
}

This feedback is already useful. While working on your code and accessing your config you will know that config.c.items is an array of strings, but you can get much more almost for free! Check below code:

const config = {
  a: 84595,
  b: 'some string',
  c: {
    items: ['item1', 'item2', 'item3'],
  },
} as const

The only difference in this piece of code is the as const added after the object definition. It will give you below feedback from IDE:

const config: {
    readonly a: 84595;
    readonly b: "some string";
    readonly c: {
        readonly items: readonly ["item1", "item2", "item3"];
    };
}

Now you see exactly what value is stored under each property of the global config object.

React-redux useSelector hook and equality checks

Tomasz Kudlinski — Tue, 12 May 2020 18:33:15 +0000

useSelector is one of the redux hooks, which really makes life of a dev much more convenient. Usually we use it to get primitive type value like in below example with isLoggedIn:

import { useSelector } from 'react-redux'

const isLoggedIn = useSelector((state) => state.user.isLoggedIn)

useSelector will cause component rerender, after redux action was dispatched only if the result will be different than the last one. It checks whether it has changed based on === comparison of the result. So, if in your selector result is wrapped in the object like below:

import { useSelector } from 'react-redux'

const { isLoggedIn, numberOfUsers } = useSelector(({
    user: { isLoggedIn },
    users: { numberOfUsers }
}) => ({ isLoggedIn, numberOfUsers }))

useSelector hook will cause your component to be rerender every time an action is dispatched.

The solution for this problem is to introduce shallow comparison of the result object (result object props will be compared like in connect()), check below example:

import { shallowEqual, useSelector } from 'react-redux'

const { isLoggedIn, numberOfUsers } = useSelector(({
    user: { isLoggedIn },
    users: { numberOfUsers }
}) => ({ isLoggedIn, numberOfUsers }), shallowEqual)

Here you can ready more about it:
useSelector hook docs

componentWillReceiveProps / UNSAFE_componentWillReceiveProps in React Hooks world

Tomasz Kudlinski — Wed, 06 May 2020 17:50:31 +0000

Probably you are also one of the React developers, who needs to, from time to time, refactor class based React component to React Hook (aka get rid off lifecycle methods). During this process you may encounter UNSAFE_componentWillReceiveProps function... very often it will look like:

In this case, we are only checking if propA value has changed. We can easily use useEffect during the refactoring to Hook:

Sometimes logic inside of UNSAFE_componentWillReceiveProps function will check the current and next value of the propA, like here:

To refactor it to Hook we need a way to store previous value of propA without rerendering the component:

In mentioned situation we can use useRef Hook and store previous value of the propA in it at the end of useEffect Hook.