SolidJS•3mo ago

How do I refresh data without reloading the page

I have a CRUD form working great, but with one last feature needed: refresh datasource. I have tried some recommendations using Route's reload and revalidation technique's but with no success. Here is a basic breakdown of what I have.

7 Replies

Antebios•3mo ago

Server code:

type Projects = {
    id: number;
    name: string | null;
    description: string | null;
    ownerId: number;
    createdAt: string | null;
    updatedAt: string | null;
}

export const getProjectsByUserId = cache(
  async (userId: number): Promise<Projects[]> => {
    "use server";
    const reponse = await db.query.projects.findMany({
      with: {
        projectsUsers: {
          where: and(eq(projectsUsers.userId, userId)),
        },
      },
    });
    const results: Projects[] = Array.from(reponse);
    return results;
  },
  "ProjectsByUserId"
);

type Projects = {
    id: number;
    name: string | null;
    description: string | null;
    ownerId: number;
    createdAt: string | null;
    updatedAt: string | null;
}

export const getProjectsByUserId = cache(
  async (userId: number): Promise<Projects[]> => {
    "use server";
    const reponse = await db.query.projects.findMany({
      with: {
        projectsUsers: {
          where: and(eq(projectsUsers.userId, userId)),
        },
      },
    });
    const results: Projects[] = Array.from(reponse);
    return results;
  },
  "ProjectsByUserId"
);

Client code:

const projects = createAsync(() => getProjectsByUserId(userId));

<For each={projects()}>
...
</For>

const projects = createAsync(() => getProjectsByUserId(userId));

<For each={projects()}>
...
</For>

I want to know how to refresh the projects call with a refresh button on the page without needing to reload the page. Clicking to a different page and back also refreshes the data, of course.

mdynnl•3mo ago

default cache duration is i think 5s so to/from different page will only load after the cache is expired for manual refreshing, revalidate() should refresh everything revalidate(getProjectsByUserId.key) should refresh all createAsync that calls getProjectsByUserId for a particular user id revalidate(getProjectsByUserId.keyFor(10)) feel free to make a repro if it's not working for you

Antebios•3mo ago

Is this done on the server or client side? Would a refresh method look like this? Server-Side:

import { reload, revalidate } from "@solidjs/router";
export async function refreshProjectsByUserId(userId: number) {
  "use server";
  revalidate(getProjectsByUserId.keyFor(userId));
}
export async function refreshProjects() {
  "use server";
  revalidate(getProjectsByUserId.key);
}

import { reload, revalidate } from "@solidjs/router";
export async function refreshProjectsByUserId(userId: number) {
  "use server";
  revalidate(getProjectsByUserId.keyFor(userId));
}
export async function refreshProjects() {
  "use server";
  revalidate(getProjectsByUserId.key);
}

Client-Side:

import { refreshProjectsByUserId, refreshProjects} from "~/hooks/useProjects";

function refreshData() {
  refreshProjects();
  // or refreshProjectsByUserId(Id);
}

import { refreshProjectsByUserId, refreshProjects} from "~/hooks/useProjects";

function refreshData() {
  refreshProjects();
  // or refreshProjectsByUserId(Id);
}

mdynnl•3mo ago

it should be done on the client for server side reloading, reload({ revalidate: ... }) under the hood, it will add the necessary info (just an http header) which the client will use it to reload we probably should add some warnings for what to call, what not to call

Brendonovich•3mo ago

If all you want to do is invalidate getProjectsByUserId, you can use revalidate on the client. It'll refetch the server function automatically

mdynnl•3mo ago

definitely, doesn't make sense to make a server function just to reload

Antebios•3mo ago

It worked!! I did this all on the client side with no server-side code needed!! So within the client code that does the update

function Submit() {
...
revalidate(getProjectsByUserId.keyFor(updateResult.ownerId));
}

function Submit() {
...
revalidate(getProjectsByUserId.keyFor(updateResult.ownerId));
}

I also created a refresh function:

  function refreshTableData() {
    log.debug("Refresh Table Data");
    revalidate(getProjectsByUserId.key);
  }

  function refreshTableData() {
    log.debug("Refresh Table Data");
    revalidate(getProjectsByUserId.key);
  }

So when I update I call Submit and it updates the record, uses the returned value of ownerId to invalidate and then refresh the data table successfully. It looks great. And I added a refresh button to call refreshTableData that invalidates the whole results and it refreshes the data perfectly without needing a page refresh!!!

Gaming

Programming

How do I refresh data without reloading the page