jCtapuk•5mo ago

I don't recommend concatenating it into a string

I tried to output it to the console and it started eating up all the memory and the browser froze and was forced to kill the processor. Or you will hit the function call limit I have not tested pure js since this error is possibly related to Nuxt (from the fact that it transfers the console from the server to the client). and tries to condense all proxy objects into a string, which apparently made him feel bad 🙂

import { api } from '@@/convex/_generated/api'
console.log(api.auth.user);

import { api } from '@@/convex/_generated/api'
console.log(api.auth.user);

7 Replies

Michal Srb•5mo ago

api.auth.user should log "auth:user", this is probably not the issue you're facing.

jCtapukOP•5mo ago

well, I managed to get it out but it returned me just an empty object {}

Michal Srb•5mo ago

Yeah, if it's not a function but a parent it'll be {}

jCtapukOP•5mo ago

Well, when passing a link to the API to the props, something breaks, and when I output to the console, the result is {} {} in the terminal on the server and there is an endless call to the function that the server has stopped working

jCtapukOP•5mo ago

@Michal Srb 😂

export const useConvexQuery = <Query extends FunctionReference<"query">>(
  query: Query,
  args: Query["_args"],
) => {
  const { $convex } = useNuxtApp();

  const id = useId();
  const data = useState<Query["_returnType"]>(`convex.data-${id}`);
  const error = useState<Error>(`convex.error-${id}`);

  let unsubscribe: Function;

  onMounted(() => {
    unsubscribe = $convex.client.onUpdate(query, args, (result) => {
      console.log("data", result);
      data.value = result;
    });
  });

  onUnmounted(() => unsubscribe());

  onServerPrefetch(async () => {
    try {
      data.value = await $convex.client.query(query, args); // http request first
    } catch (e) {
      error.value = e as Error;
      data.value = undefined;
    }
  });

  return { data: readonly(data), error: readonly(error) };
};

export const useConvexQuery = <Query extends FunctionReference<"query">>(
  query: Query,
  args: Query["_args"],
) => {
  const { $convex } = useNuxtApp();

  const id = useId();
  const data = useState<Query["_returnType"]>(`convex.data-${id}`);
  const error = useState<Error>(`convex.error-${id}`);

  let unsubscribe: Function;

  onMounted(() => {
    unsubscribe = $convex.client.onUpdate(query, args, (result) => {
      console.log("data", result);
      data.value = result;
    });
  });

  onUnmounted(() => unsubscribe());

  onServerPrefetch(async () => {
    try {
      data.value = await $convex.client.query(query, args); // http request first
    } catch (e) {
      error.value = e as Error;
      data.value = undefined;
    }
  });

  return { data: readonly(data), error: readonly(error) };
};

The function everything works fine, but as soon as I pass the props in the component it breaks

jCtapukOP•5mo ago

It's when I removed the console that crazy things happen

jCtapukOP•5mo ago

before

interface Props {
  query: T;
  args: T["_args"];
}

interface Props {
  query: T;
  args: T["_args"];
}

After

interface Props {
  query: () => T;
  args: T["_args"];
}

interface Props {
  query: () => T;
  args: T["_args"];
}

That is, for some reason the link breaks in the prop, so I wrapped the function to return the correct link.