Are you struggling to reflect changes done by mutations in your component state.

We will try adding a new TODO and 2 different ways to achieve this

  • Call refetch function
  • use refetchQueries with effects

Refetch

You can use Refetch function exposed by UseQuery hook to get latest todo list in your component and the UI will update accordingly

const { loading, data, error, refetch } = useQuery(GET_TODOS)const [addTodo] = useMutation(ADD_TODO);

In above code sample , after you call addTodo you can call refetch
this will bring the latest data from the server and update your…


Who is the audience?

Anyone struggling with React applications component hell and prop drilling will find this article helpful.

What you should know beforehand?

Should be familiar with React and Redux or Ngrx if you come from an angular background.

What is the Problem?

There are lots of problems with state management with Apollo, worked on both angular and React it feels like just caching API doesn't mean you have done state management. You should be able to consume data easily with any state management library. Apollo is very poor at client-side state management.

What is the client-side state?

The…


React applications are fast and are loved for their performance. But the transition between components or even change of states can be jittery.

The software that has animated transitions always feel more rich and premium.

You can become a pro in just minutes.

Use AOS (Animation on scroll) Link library with small footprint.

You can install aos by npm

Lets try to add animation to a form. Add data-aos attributes to control transitions.

data-aos="zoom-in"data-aos-easing="linear"data-aos-duration="500"className="question">That's it you are done , now your form should zoom in with animation. Making transitions smoother and make your feel like a pro.Happy CodingFollow for more such quick tips to help your code better. 

Recently I was working on connecting my Heroku application to go daddy and ended up having issues with traffic that didn't include www. prefix

The application timed out and it was embarrassing to the least.

It quite simple actually. Go to subdomain redirect section.

So just add a sub domain redirection from abc.com to www.abc.com. You can replace abc with your domain name.

That’s it now abc.com will point to www.abc.com. which means abc.com and www.abc.com will be same.


Recently I came across a requirement which needed me to share my webpage to Facebook.

I was amazed to see that Single page applications cannot share correctly because the Facebook crawlers don't wait until JavaScript updates the meta tags.

What were my choices?

  • Pr-render my application which is expensive , you can check yourself :D
  • Use Nextjs for server side rendering and again learn the whole framework, No way I just learned react (just kidding don't tell my recruiters)

So i wasted 2 days and these arguments could not move me?

So I came up with my own solution. Why…


I believe most of the angular developers out there have ended up working on reactive forms. I know these forms can get even complex when in an enterprise application

This is little hack that will save hours of debugging time for you and also for others on your team. And bring in one of the basic principles of programming DRY(do not repeat yourself)

How we usually access a form control in our angular component

//access the firstname value
this.profileForm.get('firstName').value

Now…

mohit thakur

simplicity is essence of my design

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