DEV Community: Damien Le Dantec

SQL for newbies (as a web developer)

Damien Le Dantec — Sat, 08 Mar 2025 13:13:19 +0000

Context

Some time ago, as web developer, I had to use PostgreSQL and write some SQL queries to fetch some data.
I have a school level about SQL, so the first queries were difficult to write and I didn't find a memo about my use cases.

So this article acts as a "SQL memo" for web developer wondering to create basic SQL queries to fetch some data from SQL databases (especially PostgreSQL database, in my case).

Select data

The most basic query is the following:

select *
from my_table

Select all data from table my_table

We avoid fetching all data, we select the desired columns:

select t.id, t.name
from my_table t

Select the columns id and name from my_table using t as an alias for my table

It's common for us to filter data

select t.id, t.name
from my_table t
where t.category = 'my_category'

Filter on the category

Renaming columns

To skip a mapping step during the fetch process, we can rename columns to match with our code base:

select
  t.id as "idTable",
  t.name as "nameTable"
from my_table t

Rename the fields id and name as idTable and nameTable

Join the tables

Usually, we need to fetch data from multiple tables.
This section is not a SQL join course so keep in mind 2 things:

When you join 2 tables and not want lose rows if some match doesn't exist on the second table, use a left join
When you join 2 tables and want to filter rows doesn't have a match with second table, use inner join

Tip : When you build your query, start by left join and refine with inner join if necessary to avoid lose data

Credit

Left join

select
  t.id,
  t2.address
from my_table t
left join my_table_2 t2 on t.id = t2.table_id

We join the tables using the table_id column of my_table_2 that matches with the id column of my_table.

Using left join, no rows of my_table are lost but some fields of my_table_2 can be null.

Inner join

select
  t.id,
  t2.address
from my_table t
inner join my_table_2 t2 on t.id = t2.table_id

We join the tables using the table_id column of my_table_2 that matches with the id column of my_table

Using inner join, some rows of my_table can be lost.

Build JSON object

As web developer, we like to use JSON objects. We can create the JSON using SQL to simplify the data manipulation.
Combined with the as keyword to rename columns, it is very useful!

select
    json_build_object(
      'id', t.id,
      'name', t.name
    ) as my_json_object
from m_table t

On each row, we have the column my_json_object that contains JSON with the keys "id" and "name"

Create JSON array

Sometimes, we need to have arrays of JSON object. We can easily do it with SQL with json_agg!

select
  json_agg(
    json_build_object(
      'id', t.id,
      'name', t.name
    ) as my_json_object
  ) as my_json_array
from m_table t

In the first (and only) row, in the column my_json_array, we have the wanted JSON array

Use "sub queries"

For complex queries, I can be useful to split big request into multiple one.
For example, a case of a query that aggregates multiple tables and another query based on the first one to do some logic to it.

select
    json_agg(
        json_build_object(
          'id', "source".id,
          'address', "source".address
        )
    )
from (
    select
        t.id,
        t2.address
    from my_table t
    left join my_table_2 t2 on t.id = t2.table_id
) as "source"
limit 5

A "first select" fetch the data under "source" and the upper select format the data

Conclusion

This article is a small memo with only the most basic commands used in my use-cases in web development.
I hope it can help someone !

Micro-frontend architecture alongside Vue 3 migration

Damien Le Dantec — Fri, 21 Jun 2024 08:45:29 +0000

Introduction

The micro-frontend architecture can resolve many issues with your frontend application.
In my context, my need was to split a Vue.js application into independent modules.
Because the original application was in Vue 2, a migration to Vue 3 was necessary.
I used the micro-frontend architecture to do a progressive migration, module per module.
In this article, I will explain how it works.

Preliminary informations

There are many ways to create a micro-frontend architecture. In our case, we use the module federation with Vite (Webpack also has his module federation plugin).

To be clear on the terms, in the context of module federation, the part of the architecture that carries all the others is named the shell and each micro-frontend is named a remote.
For our progressive migration, the shell is the initial application in Vue 2 and the remotes will be created in Vue 3. Each remote will be created one by one to do a progressive migration.

Setting up modules federation

Setting up module federation is pretty simple. My starting point is to have a Vue 2.7 application using Vite.
Once the module federation plugin is installed, you can create remotes applications (Each application is a micro-frontend).

How does modules federation works?

All the architecture is based on the shell. It is in charge of fetching and loading the remotes in the shell application.
Using module federation, the remotes are loaded using dynamic import.
In our case, we have a slight adaptation to cohabit Vue 2 shell and Vue 3 remotes using Web Components. This is the Web Component technology that isolates modules from each other and allows us to do a progressive Vue 3 migration.

Configuration of the shell

To set up module federation on the shell side, you just need to update your Vite config using the vite-plugin-federation plugin.

[shell] vite.config.js

import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: "my-application", // Name of your application
      remotes: {
        remote1: "http://localhost:4173", // URL of the remote
      },
      shared: ["vue"], // We share "vue" dependency with all our remotes
    }),
  ],
});

Configuration of the remote

[remote1] vite.config.js

import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  base: '/remote1', // The remote will be loaded under "remote1" folder
  plugins: [
    vue(),
    federation({
      name: 'remote1', // Name of the remote
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/main.ts'
      },
      shared: ['vue'] // We share "vue" dependency with all our remotes
    })
  ]
})

Using this configuration, the entry point of our remote will be /dist/assets/remoteEntry.js.
We expose our entire application created by the src/main.ts file. We will see the content of this file later.

On the shell side, we will load our remote using import(remote1/App).

Deployment of remotes in subfolders

As you can see in the configuration, each remote will be deployed as a subfolder of the shell application (for example, we access to remote1 via http://myapp.com/remote1).

This is done to facilitate application routing.

In production mode, we will use a reverse proxy to redirect HTTP requests to the proper remote. Here is an example of location config using Nginx:

location /remote1/assets/ {
    proxy_pass http://${REMOTE1_INSTANCE}/assets/;
}

The usage of the suffix "assets" is to handle the refresh of the page and do a redirection to the shell, which is in charge of routing (The shell fetches remotes with a <remote>/assets/remoteEntry.js URL).

TypeScript configuration

Because remote1/App is unknown for our shell application, we need to specify to TypeScript that "remote1/App" is a valid path.
To do this, you can create a remotes.d.ts file with this content:

declare module 'remote1/App';

Multi framework approach

Using only the previous configurations cause errors because Vue 2 shell and Vue 3 remotes will be incompatible.
To fix this, we use Web Components. We create one Web Component per remote that will be transformed in classic Vue 2 component in the shell.

To create a Web Component per remote, see the src/main.ts file of the remote:

[remote1] src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from './router.ts';

if (import.meta.env.DEV) {
  // In dev mode, we load the component to be able to launch the remote in standalone mode
  createApp(App).use(router).mount("#app");
} else {
  // In production mode, we generate the Web Component
  class RemoteWebComponent extends HTMLElement {
    connectedCallback() {
      createApp(App).use(router).mount(this); // We mount the Vue component in the Web Component
    }
  }

  customElements.define("remote1-web-component", RemoteWebComponent);
}

Once our Web Component is created, we need to have a Vue 2 component to load it in the shell application:

[shell] src/RemoteWrapper.ts

<script lang="ts">
export default {
  props: {
    elementName: { // Name of the web component that will be loaded
      type: String,
      required: true,
    },
    loadChild: { // Function to load remote (using dynamic import)
      type: Function,
      required: true,
    }
  },
  async mounted() {
    const element = document.createElement(this.elementName);
    await this.loadChild();

    const container = this.$refs.container as HTMLElement;
    if (element && container) {
      container.appendChild(element);
    }
  }
}
</script>

<template>
  <div ref="container"></div>
</template>

Connection of remotes with shell

See how the RemoteWrapper is used in the router to load our remote:

[shell] src/routes.ts

const routes = [
  {
    path: "/remote1",
    component: {...RemoteWrapper}, # We use new component for each route to be sure that the routing works properly
    props: {
      loadChild: import("remote1/App"),
      elementName: "remote1-web-component",
    },
    children: [
      {
        path: "*", // In case of we have routing in our remote
        component: {...RemoteWrapper},
        props: {
          loadChild: import("remote1/App"),
          elementName: "remote1-web-component",
        },
      },
    ],
  },
];

Mode standalone

As you can see in the src/main.ts file of the remote, we separate the dev mode and the production mode. The dev mode is used to launch the remote independently and not be aware of the shell during the development process.

Conclusion

To split the application into independent modules, the use of module federation is enough. However, to cohabit Vue 2 and Vue 3 modules, and do a progressive migration, we needed to use Web Components.

Once the migration is complete, we can remove the Web Component logic that adds some useless complexity at this point.

To go further, some ideas would be:

Use a monorepo tool to easily manage your remotes and your shell
Use shared library in your monorepo to share code between remotes
Use utility function to get the URL of the remotes about the dev or prod mode.

SolidJS: Consume REST API in an elegant way

Damien Le Dantec — Mon, 05 Jun 2023 14:17:31 +0000

In this brief article, I will show you an elegant way (for me) to consume REST API.

Context

When we consume REST API endpoints, it is often the same.
REST API are strict on HTTP verbs and naming of endpoints.

It is often a GET request to fetch array of items and POST / DELETE / PATCH to respectively create / delete / edit an item.

This article only deals with the following HTTP verbs: GET / POST / DELETE / PATCH. You can easly adapt the code for your case.

What do we want

The goal of this article is to create a hook to easly consume REST API.

We want something like this (example of Quotes REST API management):

const { items, add, remove, edit } = useQuotes();

remove and not delete because this is a reserved keywork in JavaScript

This hook handles the REST API calls AND updates local data!
The fetch is automatically done.

To be able to do it, we use createResource API and Context API.

To facilate the creation of this hook, we create a "Hook contructor" to easily create many types of endpoints.

How is our "Hook constructor" used?

Simply:

useCitations.tsx

import { createRESTApiHook } from "./createRESTApiHook";

export type Quote = {
  id: string;
  text: string;
  title: string;
  author?: string;
  tags: string[];
  numberOfVotes: number;
};

const { Provider, useRESTApi } = createRESTApiHook<Quote>();

export {
  Provider as QuotesProvider,
  useRESTApi as useQuotes
};

Usage of useQuotes:

  const { items, add, remove, edit, refetch } = useQuotes();

Because we use Context:

App.tsx

<QuotesProvider baseURL="http://localhost:8080/quotes">
  // Components using API
</QuotesProvider>

And that's all!

How is our "Hook contructor" created?

Simply:

createRESTApiHook.tsx

import {
  createContext,
  createResource,
  Resource,
  JSXElement,
  useContext,
} from "solid-js";

interface ProviderProps {
  baseURL: string;
  children: JSXElement;
}


export function createRESTApiHook<T>() {
  interface ContextValue {
    items: Resource<T[]>;
    add: (item: Omit<T, "id">) => Promise<boolean>;
    edit: (itemId: string, item: Partial<T>) => Promise<boolean>;
    remove: (itemId: string) => Promise<boolean>;
    refetch: () => void;
  }

  const context = createContext<ContextValue>();


  function Provider(props: ProviderProps) {
    const [items, { mutate, refetch }] =
      createResource<T[]>(fetchItems);

    async function fetchItems() {
      const res = await fetch(props.baseURL);
      return res.json();
    }

    async function add(item: Omit<T, "id">) {
      try {
        const res = await fetch(props.baseURL, {
          method: "POST",
          body: JSON.stringify(item),
          headers: {
            "Content-Type": "application/json",
          },
        });
        const addedItem = await res.json();
        mutate((prev) => (prev ? [...prev, addedItem] : [addedItem]));
        return true;
      } catch (err) {
        console.error(err);
        return false;
      }
    }

    async function edit(itemId: string, item: Partial<T>) {
      try {
        const res = await fetch(`${props.baseURL}/${itemId}`, {
          method: "PATCH",
          body: JSON.stringify(item),
          headers: {
            "Content-Type": "application/json",
          },
        });
        const updatedItem = await res.json();
        mutate((prev) =>
          prev?.map((elt: any) => (elt.id === itemId ? updatedItem : elt))
        );
        return true;
      } catch (err) {
        console.error(err);
        return false;
      }
    }

    async function remove(itemId: string) {
      try {
        await fetch(`${props.baseURL}/${itemId}`, {
          method: "DELETE",
        });
        mutate((prev) => prev?.filter((elt: any) => elt.id !== itemId));
        return true;
      } catch (err) {
        console.error(err);
        return false;
      }
    }

    const value: ContextValue = {
      items,
      add,
      edit,
      remove,
      refetch,
    };

    return <context.Provider value={value}>{props.children}</context.Provider>;
  }

  function useRESTApi() {
    const ctx = useContext(context);

    if (!ctx) {
      throw new Error("useRESTApi must be used within a RestAPIProvider");
    }

    return ctx;
  }

  return {
    Provider,
    useRESTApi
  }
}

Conclusion

You can already put this "Hook contructor" in your application.

Of course, this function can be improved or adapted.
For example, if the ID field of your items is not id, you can put something else or be adaptable via a props.

Thanks for reading!

SolidStart: Integration with MongoDB

Damien Le Dantec — Tue, 04 Apr 2023 13:48:14 +0000

Introduction

SolidStart is a meta-framework based on SolidJS and Solid router (Like Next.js for React or Nuxt for VueJS).

It is still in Beta but we can create great applications already.
In this article, we will see how to integrate a MongoDB database with SolidStart.

To illustrate the method, we will create a basic application: a "Shopping list" webapp.

We assume you have a running MongoDB instance accessible on port 27017.

Preparation

Before integrating MongoDB, we need to prepare our application.

Generate the application

First, we generate a SolidStart application. We use the recommended starter:

mkdir shopping-list && cd shopping-list
npm init solid@latest

And select the bare template:

? Which template do you want to use?
>    bare
     hackernews
     todomvc
     with-auth
     with-authjs
     with-mdx
     with-prisma
     with-solid-styled
     with-tailwindcss
     with-vitest

In the rest of the template generator, we select the usage of Server Side Rendering and TypeScript.

Finally, we install NPM dependencies and run dev script:

npm install
npm run dev -- --open

At this step, our application is ready to be developed!

Before adding MongoDB integration, we prepare our application by making some changes.

Model

We create the ShoppingListItem TypeScript type by creating the file src/models/shopping.ts with the following content:

src/models/shopping.ts

export type ShoppingListItem = {
  _id: string;
  label: string;
};

export type NewShoppingListItem = Omit<ShoppingListItem, "_id">;

Style

We add some CSS at the end of src/root.css.

src/root.css

ul {
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

li {
  margin-top: 10px;
}

li > button {
  margin-left: 10px;
}

Components

To help us in our app, we create a ListInput component that lets us type a new item. We create src/components/ListInput.tsx:

src/components/ListInput.tsx

import { createSignal } from "solid-js";

interface ListInputProps {
  onValidate: (value: string) => void;
}

export default function ListInput(props: ListInputProps) {
  const [value, setValue] = createSignal("");

  const onValidateValue = () => {
    props.onValidate(value());
    setValue("");
  };

  return (
    <div>
      <input
        value={value()}
        onInput={(evt) => setValue(evt.currentTarget.value)}
        type="text"
        placeholder="New item"
        onKeyPress={(evt) => {
          if (evt.key === "Enter") {
            evt.preventDefault();
            onValidateValue();
          }
        }}
      />

      <button type="button" onClick={onValidateValue}>
        Add
      </button>
    </div>
  );
}

Remove the navigation header

The default navigation header from the template is not necessary, so we delete it.
To do this, you just need to remove the <A /> tags in the src/root.tsx file.

index.tsx page

At this step, we handle the shopping list item with createSignal. No persistence, but the logic works.

We replace src/routes/index.tsx with the following content:

src/routes/index.tsx

import { createSignal, For } from "solid-js";
import ListInput from "~/components/ListInput";
import { ShoppingListItem } from "~/models/shopping";

export default function Home() {
  const [items, setItems] = createSignal<ShoppingListItem[]>([]);

  const addNewItem = (label: string) => {
    setItems((prev) => [...prev, { label, _id: Date.now().toString() }]);
  };

  const deleteItem = (itemId: string) => {
    setItems((prev) => prev.filter((item) => item._id !== itemId));
  };

  return (
    <main>
      <ul>
        <For each={items()}>
          {(item) => (
            <li>
              <span>{item.label}</span>
              <button type="button" onClick={() => deleteItem(item._id)}>
                Delete
              </button>
            </li>
          )}
        </For>
      </ul>
      <ListInput onValidate={addNewItem} />
    </main>
  );
}

Add this point, the application works without state persistence.

Integration of MongoDB

Add MongoDB

First, we install mongodb and @types/mongodb NPM dependencies:

npm install --save mongodb
npm install --save-dev @types/mongodb

Then, we create a class to manage connection with the database. We create the src/lib/database.ts with the following content:

src/lib/database.ts

import { Db, MongoClient } from "mongodb";

const MONGODB_HOST = "localhost";
const MONGODB_PORT = 27017;

export class Database {
  private db?: Db;
  private static instance: Database;

  private constructor() {}

  async init() {
    const client = new MongoClient(`mongodb://${MONGODB_HOST}:${MONGODB_PORT}`);
    await client.connect();
    this.db = client.db("shopping-list");
  }

  public static getInstance() {
    if (!Database.instance) {
      Database.instance = new Database();
    }

    return Database.instance;
  }

  getDb() {
    if (!this.db) {
      throw new Error("DB is not init");
    }

    return this.db;
  }
}

Init the database connection

When our application is launched, we need to launch the database connection.
This is done using the init() method of the Database class. The usage of the Singleton pattern helps us.

We edit the src/entry-server.tsx file to add the database initialization before the createHandler function:

src/entry-server.tsx

import {
  createHandler,
  renderAsync,
  StartServer,
} from "solid-start/entry-server";
import { Database } from "./lib/database";

// Initialization of the database (connection + retrieve db instance)
const database = Database.getInstance();
database.init();

export default createHandler(
  renderAsync((event) => <StartServer event={event} />)
);

Create a ShoppingService to interact with the Database

We create a ShoppingService to interact with the Database class and add / list / remove shopping list items.

You can create the file src/lib/shopping-service.ts with the following content:

src/lib/shopping-service.ts

import { Db, ObjectId } from "mongodb";
import { NewShoppingListItem, ShoppingListItem } from "../models/shopping";
import { Database } from "./database";

export class ShoppingService {
  db: Db;
  collectionName = "items";
  private static instance: ShoppingService;

  private constructor() {
    this.db = Database.getInstance().getDb();
  }

  public static getInstance() {
    if (!ShoppingService.instance) {
      ShoppingService.instance = new ShoppingService();
    }

    return ShoppingService.instance;
  }

  async getAllItems(): Promise<ShoppingListItem[]> {
    const itemsFromDb = await this.db
      .collection(this.collectionName)
      .find()
      .toArray();
    return itemsFromDb.map((elt) => ({
      ...elt,
      _id: elt._id.toString(), // Get _id as String
    })) as ShoppingListItem[];
  }

  async addNewItem(item: NewShoppingListItem) {
    await this.db.collection(this.collectionName).insertOne(item);
  }

  async deleteItem(itemId: string) {
    await this.db
      .collection(this.collectionName)
      .deleteOne({ _id: new ObjectId(itemId) });
  }
}

Integration with the front pages

At this point, we need to add the interactions between the ShoppingService and our index.tsx page. This will be done in 2 steps:

Create the routeData to retrieve our items and use them via useRouteData
Create the server side actions to add and delete items with createServerAction$

Retrieve our data using `routeData`

To retrieve data in our page, SolidStart uses routeData. We create a function named routeData and use createServerData$ to do actions on the server side and fetch our items.

In our component, we have the useRouteData function to retrieve our items.

To identify our request (and to be able to invalidate it when we update our data), we create a constant in the src/constants.ts file.

src/constants.ts

export const SHOPPING_ITEMS_REQ_KEY = "shoppingItems";

Then, we create the function routeData in our src/routes/index.tsx file:

src/routes/index.tsx

import { createServerData$ } from "solid-start/server";
import { ShoppingService } from "~/lib/shopping-service";
import { ShoppingListItem } from "~/models/shopping";
import { SHOPPING_ITEMS_REQ_KEY } from "~/constants";

export function routeData() {
  return createServerData$(
    async () => {
      const shoppingService = ShoppingService.getInstance();
      const data = await shoppingService.getAllItems();
      return data as ShoppingListItem[];
    },
    { key: SHOPPING_ITEMS_REQ_KEY }
  );
}

export default function Home() {
  // Content of our page
}

In routeData, we use ShoppingService to fetch our items and return them.
To use our retrieved items, we just need to use useRouteData in our Home component:

src/routes/index.tsx

import { useRouteData } from "solid-start";

export default function Home() {
  const items = useRouteData<typeof routeData>();

  // Rest of our component
}

Because we have duplication due to our previous createSignal logic, we can delete the createSignal function and edit our addNewItem and deleteItem like below:

src/routes/index.tsx

import { useRouteData } from "solid-start";

export default function Home() {
  const items = useRouteData<typeof routeData>();

  const addNewItem = (label: string) => {};
  const deleteItem = (itemId: string) => {};

  // Rest of our component
}

For now, our items are retrieved from the database! (But we have no data in the database, we will now add actions to add / delete items to fix this)

Add server side actions

For add and delete actions, we will create some functions that will be executed on the server side. Look at the functions under the routeData function:

src/routes/index.tsx

import { ShoppingListItem, NewShoppingListItem } from "~/models/shopping";

export function routeData() {
  // routeData content
}

async function addNewItemAction(newItem: NewShoppingListItem) {
  const shoppingService = ShoppingService.getInstance();
  await shoppingService.addNewItem(newItem);
}

async function deleteItemAction(itemId: string) {
  const shoppingService = ShoppingService.getInstance();
  await shoppingService.deleteItem(itemId);
}

These functions will be called by our Home component using createServerAction$ that let us call a server side function. It is pecially designed for updating data because this function lets us indicate which data we want to invalidate (to let SolidStart automatically re-fetch them).

We add our actions in our Home component, under our useRouteData like this:

src/routes/index.tsx

import { createServerAction$ } from "solid-start/server";
import { SHOPPING_ITEMS_REQ_KEY } from "~/constants.ts";

export default function Home() {
  const items = useRouteData<typeof routeData>();
  const [_adding, addNewItem] = createServerAction$(addNewItemAction, {
    invalidate: SHOPPING_ITEMS_REQ_KEY,
  });
  const [_deleting, deleteItem] = createServerAction$(deleteItemAction, {
    invalidate: SHOPPING_ITEMS_REQ_KEY,
  });

  // Rest of our component
}

We also can delete our empty addNewItem and deleteItem functions. They are replaced by our server actions. For more details about the usage of our actions, please refer to the documentation.

In a nutshell, createServerAction$ is returning a tuple containing:

In first index: The state of the action (pending, error, etc...)
In the second index: The function that will call our server side action

In our case, we are not using the first index of the tuple.

In options, we also indicate that we invalidate data of the fetch request (using SHOPPING_ITEMS_REQ_KEY).

Finally, we update the onValidate prop of ListInput to match parameters:

src/routes/index.tsx

<ListInput onValidate={(label: string) => addNewItem({ label })} />

And thats it!

Our component looks like this:

src/routes/index.tsx

import { For } from "solid-js";
import { useRouteData } from "solid-start";
import { createServerAction$, createServerData$ } from "solid-start/server";
import ListInput from "~/components/ListInput";
import { ShoppingService } from "~/lib/shopping-service";
import { NewShoppingListItem, ShoppingListItem } from "~/models/shopping";
import { SHOPPING_ITEMS_REQ_KEY } from "~/constants.ts";

export function routeData() {
  return createServerData$(
    async () => {
      const shoppingService = ShoppingService.getInstance();
      const data = await shoppingService.getAllItems();
      return data as ShoppingListItem[];
    },
    { key: SHOPPING_ITEMS_REQ_KEY }
  );
}

async function addNewItemAction(newItem: NewShoppingListItem) {
  const shoppingService = ShoppingService.getInstance();
  await shoppingService.addNewItem(newItem);
}

async function deleteItemAction(itemId: string) {
  const shoppingService = ShoppingService.getInstance();
  await shoppingService.deleteItem(itemId);
}

export default function Home() {
  const items = useRouteData<typeof routeData>();
  const [_adding, addNewItem] = createServerAction$(addNewItemAction, {
    invalidate: SHOPPING_ITEMS_REQ_KEY,
  });
  const [_deleting, deleteItem] = createServerAction$(deleteItemAction, {
    invalidate: SHOPPING_ITEMS_REQ_KEY,
  });

  return (
    <main>
      <ul>
        <For each={items()}>
          {(item) => (
            <li>
              <span>{item.label}</span>
              <button type="button" onClick={() => deleteItem(item._id)}>
                Del
              </button>
            </li>
          )}
        </For>
      </ul>
      <ListInput onValidate={(label: string) => addNewItem({ label })} />
    </main>
  );
}

Conclusion

Now you know how to integrate MongoDB with SolidStart!

We have seen how to:

Generate a SolidStart app with the starter
Use TypeScript with it
Create a MongoDB connection
Do server side requests to MongoDB from our components

Feel free to comment to give me your feedback or provide some improvements.

Thanks for reading!

DEV Community: Damien Le Dantec

SQL for newbies (as a web developer)

Context

Select data

Renaming columns

Join the tables

Left join

Inner join

Build JSON object

Create JSON array

Use "sub queries"

Conclusion

Micro-frontend architecture alongside Vue 3 migration

Introduction

Preliminary informations

Setting up modules federation

How does modules federation works?

Configuration of the shell

Configuration of the remote

Deployment of remotes in subfolders

TypeScript configuration

Multi framework approach

Connection of remotes with shell

Mode standalone

Conclusion

SolidJS: Consume REST API in an elegant way

Context

What do we want

How is our "Hook constructor" used?

How is our "Hook contructor" created?

Conclusion

SolidStart: Integration with MongoDB

Introduction

Preparation

Generate the application

Model

Style

Components

Remove the navigation header

index.tsx page

Integration of MongoDB

Add MongoDB

Init the database connection

Create a ShoppingService to interact with the Database

Integration with the front pages

Retrieve our data using routeData

Add server side actions

Conclusion

Retrieve our data using `routeData`