DEV Community: Jimmy Li

What's the difference between back_ref and back_populates, and why does it matter?

Jimmy Li — Thu, 24 Aug 2023 21:17:38 +0000

Introduction
Hello Readers, my name is Jimmy Li and I welcome you to my blog. This will be my third blog as I progress through my software development journey at Flatiron School. Today, I will be talking about SQLAlchemy Relationships, namely, how to use back_ref and back_populates to create relationships between two or more tables without having to write a ton of SQL statements.

What is SQLAlchemy?
SQLAlchemy is a Object Relational Mapper or ORM that allows a programmer to interact with databases using Python Objects instead of writing SQL queries. What does this mean? This means that we can build tables like we would using SQL as well as create relationships between those tables using primary and foreign keys. In SQLAlchemy, we can specify a Foreign key column as well as use the built in relationship() method to provide an way for one model to access properties or attributes of its related model and vice versa. I will demonstrate this idea in an example below:

Example

from sqlalchemy import Column, Integer, String, ForeignKey
from sqlalchemy.orm import relationship
from sqlalchemy.ext.declarative import declarative_base

Base = declarative_base()

class User(Base):
    __tablename__ = 'users'
    id = Column(Integer, primary_key=True)
    username = Column(String)
    posts = relationship("Post", backref="user")

class Post(Base):
    __tablename__ = 'posts'
    id = Column(Integer, primary_key=True)
    title = Column(String)
    user_id = Column(Integer, ForeignKey('users.id'))

In this example, we have defined a one-to-many relationship between two SQLAlchemy models, 'User' and 'Post'. It is one-to-many because a user can have many posts, and a post can belong to only one user. This can be seen in the schema for Post, where there is a user_id column that defines a ForeignKey that references a user. This reference is what allows a Post to be linked back to it's respective user through it's ID. Another thing of note is the use of the relationship constructor in the User model.

What is relationship?
Relationship is a constructor that is part of a module imported from SQLAlchemy ORM that provides a property to be defined in the "many" part of the relationship (in this case the User) to access all of the related models in the "one". In the example above, the posts attribute is how a User is able to access all of their related Posts.

For example: If we were to create a User instance:

#assuming all the proper imports

user = User("James")

We can access all of the posts made by James using the .posts attribute that was created by relationship.


user.posts

->[] #return a list containing Post objects

Inside of the relationship constructor, you may have noticed 2 parameters, a string and the key-word back_ref. The back_ref parameter is what actually establishes the bi-directional relationship between User and Posts. It is one of the two parameters, the other one being back_populates, which allow you to create a reference between two related models. For back_ref however, it only creates a simple reference, so keep that in mind.

Back_populates
Now that I have explained back_ref, I will now delve into back_populates. back_populates lets you establish a more fine-grained control over how the bi-directional relationship is managed. Instead of only establishing the relationship on one side of the model, back_populates requires you to specify both sides of the relationship explicitly, and this is particularly useful when you need to ensure data consistency and integrity. Let's look at the same example above but using back_populates.

Example

class User(Base):
    __tablename__ = 'users'
    id = Column(Integer, primary_key=True)
    username = Column(String)
    posts = relationship("Post", back_populates="user")

class Post(Base):
    __tablename__ = 'posts'
    id = Column(Integer, primary_key=True)
    title = Column(String)
    author_id = Column(Integer, ForeignKey('users.id'))
    user = relationship("User", back_populates="posts")

In this version of the model, both table schemas have a relationship that uses back_populates that is set to the attributes "author" and "posts" respectively. In this example, a User is able to access their posts through the "posts" attribute, and a Post is able to access the user using the "user" attribute.

Conclusion

In summary, the main distinction that I want to get across in the difference between 'back_ref' and 'back_populates' in SQLAlchemy is the level of control that they provide. 'back_ref' simplifies the setup of the relationship by establishing it automatically, while 'back_populates' gives you complete control on both ends. The choice between which one to use will depend on how complex your application's data models are and the level of control you want.

By understanding these concepts and employing them appropriately, you can harness the full power of SQLAlchemy to create well-structured and efficient database-driven applications.

Simplifying State Management with React Hook UseContext

Jimmy Li — Tue, 27 Jun 2023 16:24:21 +0000

In the world of React development, managing state across different components can be a challenging task. However, with the introduction of React hooks, particularly the useContext hook, state management has become significantly easier and more streamlined. In this blog post, we will explore the useContext hook and demonstrate its usage with code snippets to help you grasp its power and simplicity.

Understanding useContext:

The useContext hook is one of the built-in hooks provided by React. It enables you to access the value of a context directly without the need for intermediate components to pass down props. This hook eliminates the "prop drilling" problem and allows for efficient state management across the component tree.

Setting up a Context:

To start using the useContext hook, you first need to create a context. A context acts as a container for the state that you want to share across multiple components. Here's an example of how to create a simple context:

// Create a new context
const MyContext = React.createContext();

// Define a provider component
const MyProvider = ({ children }) => {
  const [state, setState] = useState(initialState);

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

In this code snippet, we start by creating a new context using the React.createContext() method. This creates a context object that holds the state and functions we want to share across components. In our example, we'll call it MyContext.

Next, we define a provider component, MyProvider, which will wrap the components that need access to the shared state. This provider component takes a children prop, which represents the components nested inside it. Within the provider, we use the useState hook to define and manage the state. The initialState variable represents the initial value of the state.

The provider component then uses the MyContext.Provider component to provide the state and any associated functions to its children components. We pass an object as the value prop, which contains the state and setState values.
By calling the useContext hook with the context you created, you can directly access the state and any functions associated with it. This eliminates the need for manual prop passing and makes your code more concise and readable.

Using the useContext Hook:

Once you have set up a context using the createContext method, you can use the useContext hook to access its value within any component that is a descendant of the provider component. Here's an example:

import React, { useContext } from 'react';

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  // Use the state and setState values
  // ...

  return (
    // JSX for your component
  );
};

In this code snippet, we import the useContext hook from the React library. We assume that MyContext has been defined previously and is accessible in the current file.

Within a functional component, such as MyComponent, we call the useContext hook and pass in the MyContext object as an argument. The hook then returns an object that contains the state and setState values defined in the MyProvider component.

By destructuring this object, we can directly access the state and setState values within our component. This allows us to use the shared state in our component's logic and render it in the JSX as needed.

Benefits of useContext:

The useContext hook offers several advantages for state management in React applications:

Simplicity: The useContext hook simplifies the process of accessing and updating state, reducing the amount of boilerplate code required.

Improved Efficiency: With the useContext hook, you can directly access the required state without traversing multiple components, enhancing performance by eliminating unnecessary re-renders.

Enhanced Scalability: By encapsulating related state and functions within a context, you can easily share and manage them across your application, making it more scalable and maintainable.

Conclusion:

The useContext hook is a powerful tool in React that simplifies state management by providing easy access to shared state across components. By leveraging this hook, you can reduce code complexity, improve efficiency, and build scalable applications more efficiently. Start implementing useContext in your React projects today and experience the benefits of streamlined state management firsthand!

Asynchronous Javascript

Jimmy Li — Sun, 14 May 2023 22:36:39 +0000

Introduction

Hello Reader, welcome to my first ever blog! This blog begins a series of blogs that I will be writing as I go through my Software Development journey as a student at Flatiron School. Today, I will be talking about Asynchronous Functions in JavaScript and the struggle that I had implementing such a function while working on my Phase 1 Project. But before we get into the nitty gritty of my issue, I would like to first introduce to you what Asynchronous means in JavaScript.

So what does Asynchronous mean in JavaScript?

When we think about doing a task in a synchronous way, what do you typically think of? For me, I usually think about the analogy of a fast-food restaurant where only one worker is present, and that worker has to serve multiple hungry customers. If the restaurant was operating in a synchronous way, the worker would first take the order from the first customer, then he/she would go about making the preparations for that order. For example, the chef would perhaps heat up the stove then after the stove was finished, they would chop some onions, then prepare the patties. The point here, is that the worker would not be very efficient if he was doing each task one after another, and here's where the beauty of doing things asynchronously comes in. Say now, that while the chef is waiting for the stove to finish heating up, he decides to now go chop up some onions and afterwards prepare the patties for grilling. After the chef is done with those two tasks, the stove is now piping hot and he is ready to begin cooking the patties. This is much more efficient we will see in a bit how JavaScript implements this idea in an example I will walk through in the section below.

What is an example of a Asynchronous function in JavaScript?

There are many types of Asynchronous functions in JavaScript, but the one that I would like to highlight today, is the fetch function. Fetch is a special operation that at its most basic level, sends a request to a web server and when it receives a response back, gives you the information that you wanted to retrieve. This is an example of what a GET fetch request is, and there are many more operations that you can perform with fetch. So why is fetch considered a Asynchronous function? I'm glad you asked! I'll demonstrate to you below with a simple coding example.

const msg = "Hello world!"
console.log(msg);
console.log("Before fetch: ")

fetch("https://date.nager.at/api/v2/publicholidays/2020/US")
.then(resp=> resp.json())
.then(data=>console.log(data))

console.log("After fetch: ")

If we have a code block that looks like this, what order would you expect the console.log()'s to be in? If things were happening in a synchronous fashion, we would expect "Hello world!" to be logged first then "Before fetch: ", then "What is 2 + 2?", then the data that we retrieved from the API, then "2 + 2 = 4", then "End fetch: " right? Here is what actually gets logged to the console:

Amazing right? Since this code block had a asynchronous function within it, JavaScript somehow knew that it would be inefficient for each line to be executed in a set order because once it reached the fetch request, it would wait until it received a response before it executed anything else. So instead, while it was waiting on the fetch request, it went ahead and took care of executing the other lines of code. Much like how the chef would go about doing other tasks while he/she waited for the stove to finish heating up. This idea is especially important when running a website, because if the website was waiting on certain asynchronous things to happen, the website could potentially not even load until it was finished with the asynchronous bits, which would not be a pleasant experience for the user. Now that we have a little bit of background on asynchronous functions and what their usefulness is, I would not like to talk about how I struggled with them during my phase-1 project.

Without getting into too much detail about my phase-1 project, the main thing that I struggled with was how to retrieve information from a fetch request after it is done. For my project specifically, I was trying to retrieve an array that held information that I manipulated from a API called PokeAPI and I was failing miserably at doing so. At first, I simply returned the array after pushing the data that I wanted it to hold, but I realized that when it was console logged, the returned "array" that I set to a variable was empty. I then tried putting return statements at both the places where I convert the response to a JSON format as well as were the fetch was being called, but I got the same result. It wasn't until I reread the course material about asynchronous functions and fetch did I realize where I issue was.

My initial code:

function getResistances(pokemon) {
  //this function will make a fetch request to the PokeAPI type endpoint and push the half damage data to an array
  //and call a separate function to fill that data in a table
  const arrOfTypes = [];
  const resist = [];
  const type1 = pokemon.type1;
  const type2 = pokemon.type2;

  arrOfTypes.push(type1);
  arrOfTypes.push(type2);

  arrOfTypes.forEach((type) => {
    if (type !== null) {
      return fetch(`https://pokeapi.co/api/v2/type/${type}`)
        .then((resp) => {
          return resp.json();
        })
        .then((resistances) => {
          for (let types of resistances.damage_relations.half_damage_from) {
            resist.push(types.name);
          }
        })
        .catch((err) => console.log("failed", err));
    }
  });
return resist; //<-- this does not return the desired array!
}

My issue was that I was thinking about the fetch within my function in a synchronous way. I thought initially that after having declared my array before the fetch, and pushing the data to it, returning the array at the end of the function would allow me to access the array with all the data in it. What really was happening was that while the fetch request was being made, JavaScript went ahead and executed the code below it, and in short, it was returning the array BEFORE the fetch request was even finished. I was able to remedy this by creating a separate function that took the array as a argument and I called that function after pushing the data to the array.

My solution:

.then((resistances) => {
          for (let types of resistances.damage_relations.half_damage_from) {
            resist.push(types.name);
            updateTableWithResistances(resist, pokemon.id); //<- calling another function INSTEAD of returning the array
            resist.length = 0;
          }

So instead of returning the array itself and doing the thing I wanted with it, I leveraged a function that did the manipulation that I wanted.

Hopefully by now, you understand a lot more about synchronous functions and how they can sometimes be misunderstood , but in the right hands can be a powerful tool. Thank you for reading my blog!