DEV Community: Christophe Kwizera

React Query Mutations Offline React-Native

Christophe Kwizera — Wed, 28 Feb 2024 00:26:47 +0000

Introduction

We are addressing a React-Query mutation issue related to offline functionality. Upon analysis, several discrepancies were identified within the setup. The following points elucidate the observed issues:

Paused & Pending

In React-Query version 5, the useMutation hook returns isPending instead of isLoading. Initially, I misconceived isPending solely as indicative of submission loading. However, it signifies both loading states: when online (isLoading) and when offline (isPending). This is evident by assessing isPaused within useMutation, which reflects false when online and true when offline.

isPaused indicates that the request has been cached and will resume (if configured accordingly) upon device reconnection to the internet.

const {
    reset,
    mutate,
    isPaused,
    isPending,
  } = useCreate();

useEffect(() => {
    if (isPaused) {
      // If a request is pending due to offline work, it may be necessary to reset the form to allow the action to be attempted multiple times despite the offline status.
      reset();
    }
  }, [isMutationPaused]);

Storing (updating) Offline Data

Using react query eliminated the need of redux to data it already hold, you will store the data onMutate and here's how it done.

Remember the queryKey you assigned to the data e.g ['todos']

const useCreate = () => {
  const queryClient = useQueryClient();
  return useMutation({
    onMutate: async variables => {
      // Cancel current queries for the order list
      await queryClient.cancelQueries({ queryKey: ['todos] })

      // Create optimistic todos
      const optimisticTodo = { ...variables };

      // Add optimistic todo to other todos list
      queryClient.setQueryData(
        ['todos'],
        (previousData) => {
          return [...previousData, optimisticTodo ];
        },
      );

      // Return context with the optimistic todo
      return { optimisticTodo };
    },
    mutationFn: (data) => createOrder(data),
  });
};

for more info read about Mutations on React_Query_Docs

Resume Paused Mutations

In my scenario, it appeared that none of the mutations were being paused. Here is the resolution I implemented:

To try to resume paused mutations only if online otherwise it will also throw Network Error and mutation will no longer be paused.

<PersistQueryClientProvider
            client={queryClient}
            persistOptions={{
                persister: syncStoragePersister
            }}
            onSuccess={() => {
                NetInfo.fetch().then(state => {
                    if (state.isConnected) {
                        queryClient.resumePausedMutations()
                    }
                })
            }}
        >

Setting focus manager also only if device is only otherwise this will also try to trigger mutations and if offline they will fail with NetworkError so no longer paused:

NetInfo.fetch().then(state => {
        if (state.isConnected && Platform.OS !== 'web') {
            focusManager.setFocused(status === 'active')
        }
    })

Honorable mention

If you persist offline mutations with the persistQueryClient plugin, mutations cannot be resumed when the page is reloaded unless you provide a default mutation function.

This is a technical limitation. When persisting to an external storage, only the state of mutations is persisted, as functions cannot be serialized. After hydration, the component that triggers the mutation might not be mounted, so calling resumePausedMutations might yield an error: No mutationFn found.

const persister = createSyncStoragePersister({
  storage: window.localStorage,
})
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

// we need a default mutation function so that paused mutations can resume after a page reload
queryClient.setMutationDefaults(['todos'], {
  mutationFn: ({ id, data }) => {
    return api.updateTodo(id, data)
  },
})

export default function App() {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister }}
      onSuccess={() => {
        // resume mutations after initial restore from localStorage was successful
        queryClient.resumePausedMutations()
      }}
    >
      <RestOfTheApp />
    </PersistQueryClientProvider>
  )
}

Conclusion

I trust you found this information beneficial. For further details, please refer to the conversation on this GitHub issue here

TaskForce Week Five

Christophe Kwizera — Sun, 20 Mar 2022 10:12:31 +0000

Design thinking is a five-step process to come up with meaningful ideas that solve real problems for a particular group of people.
the process is taught in top design and business schools around the world, it has brought many businesses lots of happy customers and helped entrepreneurs from all around the world to solve problems with Innovative new Solutions.

The purpose of Step One is to conduct interviews they give you an idea about what people really care about we need to empathize with the situation for example if you want to help older people you might find that they want to keep the ability to walk around and you'll conversations they might share with you different ways they can do that later into the interview you'll want to dig a little deeper look for personal stories of situations where things became difficult ideally you redo the process with many people with the same problem

Looking at the interviews you can now understand the actual needs that people are trying to fulfill with that and activities one way to do that is to the line the pubs or activities that the people mentioned when talking about those problems like going for a walk, meeting old friends for tea, or simply going grocery shopping around the corner store. you might realize it's not so much about going out, but more about staying in touch. after your analysis, formulate a problem statement such as some elderly are afraid to be alone, they want to stay connected.

Now Focus only on the problem statement and come up with ideas that solve the problem. the point is not to get a perfect idea come up with many ideas, like a unique virtual reality experience has CD or friendly hoverboards, or a modified pushcart, whatever it is sketch up your best ideas and show them to the people you are trying to help, so you can get that feedback.

Now take a moment to reflect on what you have learned from your conversations about the different ideas, and ask yourself; how does your idea fit in the context of people's actual lives.
Your solution could be a combination of a new idea and what is already being used then connect the dots sketch up your final solution and go build an actual prototype enough to be tested.

Now test your prototype with actual users don't defend your idea in case people don't like it the point is to learn what and what didn't so I need feedback is great then go back to ideation or prototyping and apply your learning repeat the process until you have a prototype that works and solve the real problem, now you are ready to change the world.

TaskForce Week Four

Christophe Kwizera — Sat, 12 Mar 2022 21:44:33 +0000

Critical Thinking is a term that gets thrown around a lot,
you've probably heard it being used often throughout the years, whether it was in school, at work or in everyday conversation.

When you stop to think about it, just what exactly is critical thinking and how do you do?. it's simply put it's the act of deliberately analyzing information so that you can make better judgments and decisions.
It involves using things like logic reasoning, and creativity to draw conclusions and generally understand things better, this may sound like a pretty broad definition and that's because critical thinking is a broad skill that can be apply to so many different situations.

You can use it; to prepare for a job interview, manage your time better, make decisions about purchasing things and so much more. As humans we are constantly thinking it's something we can turn off but not all of it is critical thinking, no one thinks critically 100% of the time that would be pretty exhausting, instead it's an intentional process something that we consciously use when were presented with difficult problems or important decisions.

In order to become a better critical thinker it's important to ask questions when you're presented with a problem or a decision before jumping to any conclusions you can start with simple ones like what do I currently know and how do I know this, another thing you can use is 5 whys Method this is a proccess of asking why repetitively until you get to the bottom of the issue (and YES the whys can be more than 5).
This can help to give you a better idea of what you're working with and in some cases simplify more complex issues.

Let's take a look at how we can use critical thinking to evaluate online information, say a friend of yours posts a news article on social media and you're drawn to its headline. If you were to use your everyday automatic thinking you might accept it as fact and move on but if you were thinking critically you would first analyze the available information and ask some questions what's the source of this article, Is the headline potentially misleading what are my friends General beliefs and do they inform why they might have shared this.
After analyzing all of this information you can draw a conclusion about whether you think the article is trustworthy.

Task-Force Week 3

Christophe Kwizera — Sun, 06 Mar 2022 09:57:31 +0000

This week we bigged deeper into effective communication, where we looked at different cultures and how to bring the best from each (inter-cultural communication).

StereoTypes

I was aware of different cultures but I hadn't really considered how it could affect a formal or non-formal relationship between people.

My parents raised me to be accepting of people no matter their appearance. If I had some stereotypes (a belief about a particular category of people) feelings towards, I should always be open to change, commit to knowing the person first, and always focus on what makes people similar to people different.

This is done by putting yourself in someone else's shoes and thinking for a second (how would it make me feel if the tables were turned). after that emotional step in the right direction, it leads you to some good topics and away from harmful conversation topics.

when you make the other party feel valid and safe, he/she will open up, and you'll both have effective communication.
When you get past the stereotypes barrier, Then you can get quickly to the best next part about sharing your information.

Values

Your values are the things that you believe are important in the way you live and work.
Value is a big part of people, some are tough them from the childhood to their current age. values (should) determine your priorities, and, deep down, they're probably the measures you use to tell if your life is turning out the way you want it to.

When the things that you do and the way you behave match your values, life is usually good – you're satisfied and content. But when these don't align with your personal values, that's when things feel... wrong. This can be a real source of unhappiness.

In these types of situations, understanding your values can really help. When you know your own values, you can use them to make decisions about how to live your life, and you can answer questions like these:
What job should I pursue?

Should I accept this promotion?
Should I start my own business?
Should I compromise, or be firm with my position?
Should I follow tradition, or travel down a new path?

So, take the time to understand the real priorities in your life, and you'll be able to determine the best direction for you and your life goals !

Task Force 5.0 Second Week

Christophe Kwizera — Sat, 26 Feb 2022 22:48:47 +0000

We started off with some more codewars challenges, though I consider myself an algorithm genie, some of the katas proved me wrong. on our way home I, Elvis, and Nicolas my Task-Force 5 colleagues, started going through different ways to solve the challenges, and by putting our thoughts together we were able to get passed our difficulties and accomplish our work in time.

always asking or providing assistance requires communication skills. the first step is to hear out the other party, Wiseman once told me The devil lies in the details.
while listening you should always, communicate back either verbally, with short words, or with empathetic acts to confirm that you're following one's words, and later ask questions if any. as a developer I get

It was week was Time for new changes, Winston Churchill said "To improve is to change". I have been using GITHUB as a professional version-control tool for quite a while now, and I didn't see myself having to change from it, anytime soon.
Yannick Awesomity Co-Founder introduced us to GitLab, and walked us through all the perks it brings to the table and how it is easy to set up and get running.
At first, I was not on board with the idea, but later on, when he assigned us a task and told us to use GitLab instead, it gave me the opportunity to come out of my comfort zone and learn once something new.

lastly, I was amazed by our presentation on Friday, which we were told to prepare for in less than 3 hours. we quickly got into teams, and suddenly everyone was focused on preparing their material for the presentation. This shows a great quality of how responsible, dedicated, and attentive good Engineers can be we assigned a task, and concluding The hard work paid off because every group had a great presentation and were able to answer all the questions asked by the audience

Task-Force Pilot Week

Christophe Kwizera — Sun, 20 Feb 2022 06:13:47 +0000

What is Task-Force
Task force is a program aiming to bridge the knowledge gap of software developers either university graduates or self-taught developers with profound previous knowledge of programming or designing.

find more about taskforce here

1. Team Building

We started off, with a team-building session. we started with a game of picking an egg and putting it on top of a bottle, which involved all 5 members of the group at once.

one of many lessons I learned from that game is; to listen more to what my team members, before deciding on the action to be taken, for the treasure lies in details.

later we were randomly picked, and assigned several assignments, which helped us put to use the skills we gained from the team building session.

2. Project Management

We had the opportunity to learn Project Management skills from Yves Ndejuru, where we took a deep dive into waterfall and Agile (project management methodologies).

Agile

This can be described as an iterative approach to delivering a project throughout its life cycle. This methodology breaks down large tasks to be completed in specific time frames called sprints.
In my point of view, it's used to promote flexibility, velocity (delivering pieces of the project to the user to ensure customer needs are met and get his/her product to the market in time with the best quality) and adaptability (enhance your product with the latest client needs). the methodology breaks down large tasks to be completed in specific time frames.

Waterfall

unlike Agile, waterfall is best suited for projects with a clear picture of the final product, it only works if a client doesn’t expect to make changes to the scope of the project after it has commenced.

some areas that waterfall works well are; construction, Manufacturing, repeated services, and many more.

in concluding there's more to come, in the 5 remaing weeks ahead, and i can't wait