Forem: Mandy Petrakis

Understanding Tanstack Query Keys

Mandy Petrakis — Sat, 09 Dec 2023 01:34:16 +0000

In React Query, the Query Key is a unique identifier that represents a specific query. They not only help you identify the query, but they also play a critical role in caching data. At a high level, the Query Key is an array and can simply contain a single string or be more complex and contain nested objects. This identifier is used to manage the cache, track the status of queries, and enable efficient updates to the UI when data changes. This blog will give an understanding of that functionality and best practices on how to do that effectively so you can get React Query up and running in your project.

Caching

To understand the role Query Keys play and how to use them you have to understand that the Query Cache is an object. In this object, the keys are your Query Keys that have been serialized and the value is the data returned from your query. Because of this, your keys will need to be unique to that specific query otherwise when React Query finds an entry for that key, it will use the value rather than use the query function to return the data.

Invalidating

In React Query, when you invalidate a query the Query Function refetches and updates the data associated with a particular query. When data in the underlying source changes, you can use the queryClient.invalidateQueries method to mark a specific query or set of queries as stale. This triggers a refetch the next time the invalidated query is accessed.

For instance, if a user updates an item in a to-do list, the corresponding query fetching that list can be invalidated using this method:

queryClient.invalidateQueries(queryKey);

By invalidating queries strategically, you ensure that the UI reflects the most up-to-date data without the need for a manual refresh. React Query's caching system then handles the refetch efficiently, maintaining a seamless and performant user experience.

Structure

Structure your keys as an array from most generic to most specific, with as much detail as you see fit. Be sure to include any variables your function depends on. Consider breaking apart the URL with the information in each slash being a new element in the array.

/posts > ["posts"]
/posts/1 > ["posts", post.id]
/posts?authorId=1 > ["posts", {authorId: 1}]
/posts/2/comments > ["posts", post.id, "comments"]

With this structure, you can invalidate everything related to posts with ["posts"] and any specific post.id.

Dynamic

One of the strengths of React Query is its ability to handle dynamic data fetching. Query keys can include dynamic parameters, allowing you to easily fetch data based on user input or other changing conditions.

const userId = getCurrentUserId(); // dynamic user ID const userQueryKey = ['user', userId];

In this example, the query key includes a dynamic userId obtained at runtime, allowing you to fetch data for a specific user dynamically.

Setting up Bcrypt in your Rails project

Mandy Petrakis — Wed, 23 Aug 2023 22:08:35 +0000

If you're here you probably already know that storing passwords in plain text is a bad idea. Here is a step-by-step guide on how to set up Bcrypt in your Rails project. It's quite simple, yet offers powerful security to your user's information as well as any sensitive data you might be storing in your database. It's so simple in fact, you'll probably have time to read about how it works at the end if you aren't already familiar.

If you don't have your Rails project set up go ahead a run:

rails new ProjectName

Add the 'bcrypt' Gem to your project's Gemfile:

gem 'bcrypt', '~> 3.1.13'

In your terminal, run:

bundle install

Generate the model you will be storing the password in and include password_digest as an attribute. Remember the default type when using a generator is a string which is how the password_digest will be stored.

rails g model User name email password_digest

In the model, add your associations and validations and include has_secure_password

class User < ApplicationRecord
    has_secure_password

    # Include additional validations...
end

Migrate your database to create your users table

rails db:migrate

Implement user registration in your users_controller with a create action along with your error handling. Though we included a password_digest attribute in our user table, we will still take in a password and password_confirmation in our user_params. Bcrypt will do the work of hashing the plain text password and storing it as password_digest thanks to that handy single line of code in step 4, has_secure_password.

class UsersController < ApplicationController 

rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid

     def create 
          user = User.create!(user_params) 
      session[:user_id] = user.id
        # Include any additional successful registration steps
    end

private 

     def user_params 
          params.permit(:name, :email, :password, :password_confirmation) 
     end 

     def render_record_invalid(e)
          render json: {errors: e.record.errors.full_messages}, status: :unprocessable_entity
     end
end

So far the code above will take in new user information as use_params and create a new user. It will verify that the password and password_digest match and save the new user to the database if so along with the Bcrypt generated password_digest. If the password and confirmation do not match, the bang operator in User.create! will raise an error that will be rescued with the render_record_invalid function to return any errors so we can render them to the dom for our user.

Lastly, we will authenticate our users when they sign in. This will go into the cont roller responsible for your user authentication, such as a sessions_controller. First, the action will find the user via their email, in this example and authenticate the password they input against the store password_digest.

class SessionsController < ApplicationController 
     def create 
    user = User.find_by(email: params[:email]) 
    if user && user.authenticate(params[:password]) 
        # Handle successful login 
    else 
        # Handle login failure 
     end 
  end
end

Thats it! Your passwords are being stored securely.

How it works:

Bcrypt is a hashing algorithm that takes a bit of data (e.g. password) and creates a "digital fingerprint" from it. In other words 'password' becomes something like 2b$10$nOUIs5kJ7naTuTFkBy1veuK0kSxUFXfuaOKdOKf9xYT0KKIGSJwFa.

What makes Bcrypt more secure is that it adds "salt" to the password before hashing it. Salt is a random bit of additional data that is prepended to the password the user entered before it is hashed. This looks like turning our password into E4OAovh7rbpassword before processing it through the hashing algorithm. This way, if two people have have the same password, the salt ensures that their password_digest is completely different.

So how do we authenticate the user?

Bcrypt stores the password salt prepended on the password hash in the password_digest so all we have to do is add that salt to the password the user entered upon log in and see if it matches. Yes, the stored hash does have embedded information about its computation. As seen in the example below from the Bcrypt official npm page.

$2b$10$nOUIs5kJ7naTuTFkBy1veuK0kSxUFXfuaOKdOKf9xYT0KKIGSJwFa
 |  |  |                     |
 |  |  |                     hash-value = K0kSxUFXfuaOKdOKf9xYT0KKIGSJwFa
 |  |  |
 |  |  salt = nOUIs5kJ7naTuTFkBy1veu
 |  |
 |  cost-factor => 10 = 2^10 rounds
 |
 hash-algorithm identifier => 2b = BCrypt

Handling associated records when an object is deleted

Mandy Petrakis — Tue, 23 May 2023 19:00:57 +0000

In phase 3 of my coding boot camp, we scratched the surface of database management with the help of Active Record. I have to say, Active Record is the real MVP and maybe I'm not looking in the right places but I don't see it getting a ton of love online so shout out to Active Record. Until it came into the picture I found myself thinking things like "Maybe the backend isn't for me", "There's no way people write this much SQL" and "There has to be a better way". Fortunately, that last thought was correct. Active Record provides us with a powerful set of tools to simplify many processes, including how to handle children of objects you delete from your database. This came in handy when working on a project and in this blog we will explore ways to handle all records associated with an object using some built-in features of Active Record.

First things first - for there to be a parent/child relationship in your database, your tables have to be associated. Associations define relationships between different models in a database. The most common association types include has_many, belongs_to, has_one, and has_and_belongs_to_many. These associations establish connections between tables, allowing us to navigate relationships and fetch associated data with ease. Your association is declared in your model classes like so:

class Owner < ActiveRecord::Base

has_many :items

end

class Item < ActiveRecord::Base

belongs_to :owner

end

This example is a one-to-many association where an Owner has many Items and each item belongs to one owner. Associations give us access to methods that simplify database interactions such as effortlessly querying, building, creating, updating, and deleting associated objects.

The :dependent option in Active Record associations allows you to specify the behavior of associated records when the parent object is deleted. The cool thing is, it provides flexibility and control over the deletion process with a few different options. Here is an overview of what they are:

:destroy: Calls the destroy method on each associated record, triggering associated callbacks and validations. This option allows for cascading deletion of associated records.

(Side note: Cascading deletion simply refers to the automatic deletion of associated records when the parent object is deleted. This deletion "cascades" down to the associated records, ensuring data integrity and consistency. It simplifies the process of deleting complex data structures and prevents orphaned records.)

:delete_all: For scenarios where performance is critical, the :delete_all option comes in handy. It performs a single SQL DELETE statement to directly remove all associated records without triggering callbacks or validations. This approach offers a significant performance boost when deleting a large number of associated records.
:nullify: In certain cases, rather than deleting associated records, we may prefer to nullify the foreign key column of those records. The :nullify option achieves this by updating the foreign key column of associated records to NULL without deleting them. This option preserves the data.
:restrict_with_exception and :restrict_with_error: To enforce constraints on deletion, Active Record provides :restrict_with_exception and :restrict_with_error. When the :restrict_with_exception option is used, an exception is raised if associated records exist, preventing the deletion of the parent object until the associated records are removed. On the other hand, :restrict_with_error adds an error to the parent object, preventing its deletion.

Example usage:

class Owner < ActiveRecord::Base

has_many :items, dependent: :destroy

end

In the above example, when an owner is deleted, all associated items will also be destroyed due to the :dependent option set to :destroy.

These options offer flexibility in managing associated records during deletion, allowing you to choose the approach that best suits your needs. Remember to consider the impact on your application's performance when if you may need that data in the future when deciding on a :dependent option!

Context, Simply Put

Mandy Petrakis — Mon, 20 Feb 2023 20:36:55 +0000

When I started to learn React, I was overwhelmed by the concept of Context so I immediately forgot everything I read and decided I would just never use it. Then I had to drill state and setState 5+ components deep in a bootcamp project and I thought maybe I should give Context another chance. At that point I was more familiar with state and component trees and armed with that confidence (and a playlist of youTube videos) I set out to understand and implement Context in my app, and lets just say I nailed it. Here is my simplified explanation for anyone just starting out with Context.

What is Context?

Context is a way of accessing data through your whole component tree without having to pass props down manually at every level. Once Context is created you can import it in any component you wish to access the data. Simply put, its like creating a global state.

When to use Context?

I had read a few suggestions to use Context sparingly which was part of the reason I didn't spend time learning it initially, and frankly, I don't heed that advice now. For me, Context makes my code feel a lot cleaner and better managed. If I need access to a piece of state in 3 or more components, I'm using Context. That is especially true if I'm going update the state and I want the change to persist across all pages of my app. Common examples people use for Context are setting a dark theme and referencing if a user logged in. I personally use it often with data I have fetched from an API.

How to do it:

We will need to do two things to use Context:

Establish Context with createContext and wrapping components that will use the context in a Context.Provider.
Importing the context in the consumer component with useContext. (With a bonus method of importing Context at the end!)

First, decide where you want to store your context data. I like to put it in a separate Context component and import it to my App component. This keeps my code tidy but you can also establish Context directly in your App component. Like state, you just want to make sure it lives in a parent to all the components that will eventually import the data. If you are storing context in a Context component like me, you will need to pass it a {children} prop.

In the Context component import createContext from react with your other hooks. In this example, I'm going to useState to store the data we will pass as context to the consumer components.

Next we will need to use the createContext hook to declare our context outside our Context component using the createContext() function. We declare the context outside the Context component because we are going to export it for use in our consumer components.

Your code should look like this so far:

Now we need to tell React what data our DataContext we just created will hold. This is usually where I would useEffects to fetch data from an API and assign it to a state variable but to keep our example clean and simple I'm just going to declare the state with a default value of an array of numbers.

From here we create the 'provider component' for the DataContext as a return from our Context component. This DataContext.Provider component takes one prop called value which we assign data (our state from the previous step) and wraps around the {children} prop we gave to our Context component earlier. Like this:

What if we wanted to use setData in another component of the app? Well, we could declare another context and call it something like UpdateDataContext and wrap both our child and DataContext.Provider in the UpdateDataContext.Provider. If this were unrelated data, I would probably go ahead and do that.

Instead since setData is part of our data state, in our DataContext.Provider we set our value to an array of [data, setData]. This will pass both our data and setData function to our children components in our single DataContext.Provider.

The final step in our provider component process is to import our Context component to our App component and wrap it around all the children, or 'consumer components' we want to pass our data to.

At this stage, our data and setData are available to all the components in our app without having to pass any props! Amazing, but how do we access them? Thats step 2...

useContext

Lets go directly to ComponentC, bypassing components A and B. Here we will import useContext from react as well as our DataContext from our Context component.

We'll then take the useContext hook, pass it DataContext and declare the variables we will be setting the data to in ComponentC.

Viola! You now have access to your data state and setData function in ComponenetC to use as you wish with out having to pass the prop through multiple components.

TLDR:

To recap, in order to create globally accessible state with Context in your app we:

Created the Context Provider by:

Creating a Context component and passing it a prop of {children}.
Importing createContext from react
Declaring and exporting our DataContext from createContext() outside the Context component.
Declaring the state we will use as our context data inside the Context component.
Wrapping our {children} in the DataContext.Provider that has one prop of value and setting it to the state we declared in step 4.
Exporting our Context component and importing it in the App component to wrap around all the components in our app.

Accessed the Context in our consumer component by:

Importing useContext from react and DataContext from our Context component in our consumer component.
Assigning our data and setData variables using useContext and passing it our DataContext.

Bonus!

The above works just fine but one more thing I like to do to streamline my code is rather than importing useContext in my consumer, I export a function that returns useContext() from my Context component so I only have to import this function to to access my data in my consumer components. This is what it looks like in both Context and ComponenetC.

What we did was:

Import useContext in the Context component and remove it from ComponentC.
Export the useData function that returns useContext(DataContext).
Imported useData in ComponentC.

Thats it! After setting up Context once or twice I felt a lot more confident but I did reference my notes on future tries so write your own workflow or save this blog for future reference!

When not to use forEach()

Mandy Petrakis — Thu, 05 Jan 2023 22:41:41 +0000

The first phase of my coding boot camp was a doozy. I learned early and fast that documentation is my best friend as a newbie developer (and I do suspect we will grow old together). I looked at my google search history and I found I was a frequent flier on all the array iterator MDN pages. They were SO helpful, but more than once I found myself building functions to do exactly what they do. On top of their functionality, I had to get better at recognizing when to use which one and more specifically, when not to use forEach().

forEach()

Like I implied, forEach() was my catch-all. It was the enabler to my "I want to take the ugly long way, and maybe not even get where I'm going" habit. Don't get me wrong, once I stopped abusing our friendship forEach() and I got on great. It is particularly useful when you want to perform an action on each element of an array, but you don't need to return a new array or you want to update the elements of the original array.

Here is an example:

You can see the original array was destructively updated.

Something to note is that the return value of forEach() is undefined. Therefore, in the example above, had we saved it to a newArray variable, the value of that new variable would be undefined.

If you find yourself returning a value in your forEach(), it can be a helpful clue to another method you can use to do some work for you and make your code a little cleaner and more expressive.

.map()

If you are returning an array in your forEach(), you may be better off using map().

The map() array iterator applies a function to each element of an array and returns a new array with the results. The original array is not modified.

A critical step I missed in the beginning (as in, two weeks ago- I've grown so much) was the necessity of saving the .map() to a variable to use later. Like this:

Applying map() returns the new array and assigning it to a variable lets you use it later on. If you didn't save it to a variable, did you even map()?

.find()

Next, if your forEach() has an if statement that returns the item try using find().

find() returns the value of the first element in the array that passes the test implemented by the provided function. If no element passes the test, it returns undefined.

You can also use find() when you want to find an element in an array based on its properties. For example, the following code uses find() to find the first user in an array of users with a certain name:

In general, you should use the find() array iterator when you want to find the first element in an array that satisfies a certain condition, and you only need to return the value of that element.

.filter()

If your forEach() contains an if statement that pushes the element to a new array, you've done a lot of work but you could have used filter() instead.

filter() creates a new array with all the elements that pass the test implemented by the provided function. If no element passes the test, it returns an empty array.

You can also use the filter() array iterator when you want to filter an array based on the properties of its elements. For example, the following code uses filter() to get all the users from an array of users who are over 30 years old:

.reduce()

The last method we'll look at (there are more), is reduce(). If your forEach is returning the sum or product of an array, this method is for you.

The reduce() array iterator executes a reducer function (that you provide) on each element of the array, resulting in a single output value. The reducer function takes four arguments. The first argument is the accumulator, which "accumulates" all the return values after the reducer function is invoked. The second argument is the current value you are working with and the last two arguments are optional (the current index and the array).

Resources

forEach()
.map()
.find()
.filter()
.reduce()