Nuxt•11mo ago

Empty response in pinia store from server API using $fetch

On a server route server/api/offices/index.post.ts, supabase is (successfully) used to update an "office". We are returning this office on the server route. In the office pinia store, we use this method to add the office via the server:

const addOffice = async () => {
    const reqBody = {
      name: state.name,
      street: state.street,
      city: state.city,
      zip: state.zip,
      organizationId: organizationID,
    };

    try {
      const data = await $fetch("/api/offices", {
        method: "post",
        body: reqBody,
      });
      offices.value.push(data);
    } catch (error) {
      toast.add({ title: `Fehler beim Erstellen vom Standort. [Error: ${error}]`, color: "red" });
      return;
    }

    state.name = undefined;
    state.street = undefined;
    state.city = undefined;
    state.zip = undefined;
  };

const addOffice = async () => {
    const reqBody = {
      name: state.name,
      street: state.street,
      city: state.city,
      zip: state.zip,
      organizationId: organizationID,
    };

    try {
      const data = await $fetch("/api/offices", {
        method: "post",
        body: reqBody,
      });
      offices.value.push(data);
    } catch (error) {
      toast.add({ title: `Fehler beim Erstellen vom Standort. [Error: ${error}]`, color: "red" });
      return;
    }

    state.name = undefined;
    state.street = undefined;
    state.city = undefined;
    state.zip = undefined;
  };

However, the data does not contain the added office and is just an empty object. The fetching of offices with $fetch and callOnce does work as expected. We have applied the suggestions from this awesome video: https://www.youtube.com/watch?v=njsGVmcWviY What are we doing wrong? If anyone has an example with pinia + CRUD server API, it would be awesome to share it with us 🙏

Alexander Lichter

YouTube

You are using useFetch WRONG! (I hope you don't)

💪🏻 useFetch is a mighty composable to fetch data in your Nuxt.js application. It can do so many things, from updating state to refreshing calls easily and even data caching is possible. But often I see that people misuse useFetch because it is so tempting to use all the features, even when you shouldn't. In this video I show the most common mist...

5 Replies

fmeyjrOP•11mo ago

Server code:

export default defineEventHandler(async (event) => {
  const client = await serverSupabaseClient<DB>(event);
  const user = await serverSupabaseUser(event);

  if (!user) {
    throw createError({ statusCode: 401, statusMessage: "Unauthorized" });
  }

  const body = await readBody(event);
  console.log("post office readBody", body); // works fine

  if (!body) {
    throw createError({ statusCode: 400, statusMessage: "Bad Request. No body found!" });
  }

  const { data, error } = await client
    .from("office")
    .insert([
      {
        id: randomUUID(),
        name: body.name,
        street: body.street,
        zip: body.zip,
        city: body.city,
        organization_id: body.organizationId,
        maintainer_id: user.id,
      },
    ])
    .select()
    .single();

  console.log("post office", data); // shows the proper object with data

  if (error) {
    throw createError({ statusCode: 500, statusMessage: `Can't POST office. ${error}` });
  }
);

  return data;
});

export default defineEventHandler(async (event) => {
  const client = await serverSupabaseClient<DB>(event);
  const user = await serverSupabaseUser(event);

  if (!user) {
    throw createError({ statusCode: 401, statusMessage: "Unauthorized" });
  }

  const body = await readBody(event);
  console.log("post office readBody", body); // works fine

  if (!body) {
    throw createError({ statusCode: 400, statusMessage: "Bad Request. No body found!" });
  }

  const { data, error } = await client
    .from("office")
    .insert([
      {
        id: randomUUID(),
        name: body.name,
        street: body.street,
        zip: body.zip,
        city: body.city,
        organization_id: body.organizationId,
        maintainer_id: user.id,
      },
    ])
    .select()
    .single();

  console.log("post office", data); // shows the proper object with data

  if (error) {
    throw createError({ statusCode: 500, statusMessage: `Can't POST office. ${error}` });
  }
);

  return data;
});

manniL•11mo ago

if you could put that in a simple reproduction (without supabase is fine) on https://nuxt.new that'd help to take a look at

Nuxt.new

Start a new Nuxt project

manniL•11mo ago

also, where do you log data? before offices.value.push(data);?

fmeyjrOP•11mo ago

Update: the code is working as intended in edge.. but not chrome 😂 Thanks again for all your input Alex! Much appreciated! 🙇‍♂️

manniL•11mo ago

Oh, that's weird 🙈 Of course!

Gaming

Programming

Empty response in pinia store from server API using $fetch