Rin•2mo ago

fetch failed

I can't ping the cloud

23 Replies

Sara•2mo ago

Hey Rin, I don't think it's a great Idea to expose your routes like this even if they're dev, Could you share what your function looks like on the convex side? also out of curiousity, what's the reason for naming the page route server?

RinOP•2mo ago

import Home from "./inner";
import { preloadQuery, preloadedQueryResult } from "convex/nextjs";
import { api } from "@/convex/_generated/api";

export default async function MainPage() {
  const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
    count: 3,
  });

  const data = preloadedQueryResult(preloaded);

  return (
    <main className="p-8 flex flex-col gap-4 mx-auto max-w-2xl">
      <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      <div className="flex flex-col gap-4 bg-slate-200 dark:bg-slate-800 p-4 rounded-md">
        <h2 className="text-xl font-bold">Non-reactive server-loaded data</h2>
        <code>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </code>
      </div>
      <Home preloaded={preloaded} />
    </main>
  );
}

import Home from "./inner";
import { preloadQuery, preloadedQueryResult } from "convex/nextjs";
import { api } from "@/convex/_generated/api";

export default async function MainPage() {
  const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
    count: 3,
  });

  const data = preloadedQueryResult(preloaded);

  return (
    <main className="p-8 flex flex-col gap-4 mx-auto max-w-2xl">
      <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      <div className="flex flex-col gap-4 bg-slate-200 dark:bg-slate-800 p-4 rounded-md">
        <h2 className="text-xl font-bold">Non-reactive server-loaded data</h2>
        <code>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </code>
      </div>
      <Home preloaded={preloaded} />
    </main>
  );
}

Sara•2mo ago

Ok, I see the problem, prekoadedQueryResult does not exist under convex/nextjs what you're looking to do is to use usePreloadedQuery folowing the docs on: https://docs.convex.dev/api/modules/nextjs so you have to places, the server component and the client component, you pass the result from the "preloadedQuery" and pass it down to Home you're doing, and remove data with its jsx part

RinOP•2mo ago

I don't understand why sometimes I can call and sometimes I can't.

RinOP•2mo ago

just called successfully with status 200 but when reloaded it is 500

Sara•2mo ago

its a type error, nextjs is failing to load not convex your running npx convex dev, correct?

RinOP•2mo ago

 "scripts": {
    "dev": "npm-run-all --parallel dev:frontend dev:backend",
    "dev:frontend": "next dev --turbopack",
    "dev:backend": "convex dev",
    "predev": "convex dev --until-success",
    "build": "next build --turbopack",
    "start": "next start",
    "lint": "next lint"
  },

 "scripts": {
    "dev": "npm-run-all --parallel dev:frontend dev:backend",
    "dev:frontend": "next dev --turbopack",
    "dev:backend": "convex dev",
    "predev": "convex dev --until-success",
    "build": "next build --turbopack",
    "start": "next start",
    "lint": "next lint"
  },

my script

Sara•2mo ago

have you followed these steps?

RinOP•2mo ago

of course

"use client";

import { api } from "@/convex/_generated/api";
import { Preloaded, useMutation, usePreloadedQuery } from "convex/react";

export default function Home({
  preloaded,
}: {
  preloaded: Preloaded<typeof api.myFunctions.listNumbers>;
}) {
  const data = usePreloadedQuery(preloaded);
  const addNumber = useMutation(api.myFunctions.addNumber);
  return (
    <>
      <div className="flex flex-col gap-4 bg-slate-200 dark:bg-slate-800 p-4 rounded-md">
        <h2 className="text-xl font-bold">Reactive client-loaded data</h2>
        <code>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </code>
      </div>
      <button
        className="bg-foreground text-background px-4 py-2 rounded-md mx-auto"
        onClick={() => {
          void addNumber({ value: Math.floor(Math.random() * 10) });
        }}
      >
        Add a random number
      </button>
    </>
  );
}

"use client";

import { api } from "@/convex/_generated/api";
import { Preloaded, useMutation, usePreloadedQuery } from "convex/react";

export default function Home({
  preloaded,
}: {
  preloaded: Preloaded<typeof api.myFunctions.listNumbers>;
}) {
  const data = usePreloadedQuery(preloaded);
  const addNumber = useMutation(api.myFunctions.addNumber);
  return (
    <>
      <div className="flex flex-col gap-4 bg-slate-200 dark:bg-slate-800 p-4 rounded-md">
        <h2 className="text-xl font-bold">Reactive client-loaded data</h2>
        <code>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </code>
      </div>
      <button
        className="bg-foreground text-background px-4 py-2 rounded-md mx-auto"
        onClick={() => {
          void addNumber({ value: Math.floor(Math.random() * 10) });
        }}
      >
        Add a random number
      </button>
    </>
  );
}

my home component because this is source code example

RinOP•2mo ago

Sara•2mo ago

could you share where you got the code from? 😅 something aint right + your backend query

RinOP•2mo ago

import { v } from "convex/values";
import { query, mutation, action } from "./_generated/server";
import { api } from "./_generated/api";
// Write your Convex functions in any file inside this directory (`convex`).
// See https://docs.convex.dev/functions for more.
// You can read data from the database via a query:
export const listNumbers = query({
  // Validators for arguments.
  args: {
    count: v.number(),
  },
  // Query implementation.
  handler: async (ctx, args) => {
    //// Read the database as many times as you need here.
    //// See https://docs.convex.dev/database/reading-data.
    const numbers = await ctx.db
      .query("numbers")
      // Ordered by _creationTime, return most recent
      .order("desc")
      .take(args.count);
    return {
      numbers: numbers.reverse().map((number) => number.value),
    };
  },
});
// You can write data to the database via a mutation:
export const addNumber = mutation({
  // Validators for arguments.
  args: {
    value: v.number(),
  },
  // Mutation implementation.
  handler: async (ctx, args) => {
    //// Insert or modify documents in the database here.
    //// Mutations can also read from the database like queries.
    //// See https://docs.convex.dev/database/writing-data.
    const id = await ctx.db.insert("numbers", { value: args.value });
    console.log("Added new document with id:", id);
    // Optionally, return a value from your mutation.
    // return id;
  },
});

import { v } from "convex/values";
import { query, mutation, action } from "./_generated/server";
import { api } from "./_generated/api";
// Write your Convex functions in any file inside this directory (`convex`).
// See https://docs.convex.dev/functions for more.
// You can read data from the database via a query:
export const listNumbers = query({
  // Validators for arguments.
  args: {
    count: v.number(),
  },
  // Query implementation.
  handler: async (ctx, args) => {
    //// Read the database as many times as you need here.
    //// See https://docs.convex.dev/database/reading-data.
    const numbers = await ctx.db
      .query("numbers")
      // Ordered by _creationTime, return most recent
      .order("desc")
      .take(args.count);
    return {
      numbers: numbers.reverse().map((number) => number.value),
    };
  },
});
// You can write data to the database via a mutation:
export const addNumber = mutation({
  // Validators for arguments.
  args: {
    value: v.number(),
  },
  // Mutation implementation.
  handler: async (ctx, args) => {
    //// Insert or modify documents in the database here.
    //// Mutations can also read from the database like queries.
    //// See https://docs.convex.dev/database/writing-data.
    const id = await ctx.db.insert("numbers", { value: args.value });
    console.log("Added new document with id:", id);
    // Optionally, return a value from your mutation.
    // return id;
  },
});

when i first learned about it i remember cloning it somewhere

Sara•2mo ago

why the too many comments haha give me a moment to read

RinOP•2mo ago

the thing i don't understand is i can't ping the convex deployment host but the other hosts can

Sara•2mo ago

I don't think I can explaing that! sorry about that, maybe its considered private, and you can only access it with localhost or the client side only.. anyway so try this on your server side

import Home from "./inner";
import { preloadQuery } from "convex/nextjs";
import { api } from "@/convex/_generated/api";

export default async function MainPage() {
  const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
    count: 3,
  });

  return (
    <main className="p-8 flex flex-col gap-4 mx-auto max-w-2xl">
      <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      <div className="flex flex-col gap-4 bg-slate-200 dark:bg-slate-800 p-4 rounded-md">
        <h2 className="text-xl font-bold">Non-reactive server-loaded data</h2>
      </div>
      <Home preloaded={preloaded} />
    </main>
  );
}

import Home from "./inner";
import { preloadQuery } from "convex/nextjs";
import { api } from "@/convex/_generated/api";

export default async function MainPage() {
  const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
    count: 3,
  });

  return (
    <main className="p-8 flex flex-col gap-4 mx-auto max-w-2xl">
      <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      <div className="flex flex-col gap-4 bg-slate-200 dark:bg-slate-800 p-4 rounded-md">
        <h2 className="text-xl font-bold">Non-reactive server-loaded data</h2>
      </div>
      <Home preloaded={preloaded} />
    </main>
  );
}

what happens when you hit /server? take a screenshot of the stack trace

RinOP•2mo ago

Sara•2mo ago

last question, show your convexProvider code please I suspect you're using the wrong url

RinOP•2mo ago

"use client";

import { ReactNode } from "react";
import { ConvexProvider, ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export default function ConvexClientProvider({
  children,
}: {
  children: ReactNode;
}) {
  return <ConvexProvider client={convex}>{children}</ConvexProvider>;
}

"use client";

import { ReactNode } from "react";
import { ConvexProvider, ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export default function ConvexClientProvider({
  children,
}: {
  children: ReactNode;
}) {
  return <ConvexProvider client={convex}>{children}</ConvexProvider>;
}

Sara•2mo ago

I'm reproducing this, give me like 5 min

RinOP•2mo ago

I am happy about that

Sara•2mo ago

its working fine for me maybe check your api import?

fetch failed

Did you find this page helpful?