Update Convex example for v0.2.0 (vercel#41143)

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Author: thomasballinger

examples/convex/convex/_generated/dataModel.ts examples/convex/convex/_generated/dataModel.d.ts

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@0.1.9.
+ * Generated by convex@0.2.0.
  * To regenerate, run `npx convex codegen`.
  * @module
  */
@@ -46,7 +46,7 @@ export type Document = any;
  * to the same document.
  */
 export type Id = GenericId<string>;
-export const Id = GenericId;
+export declare const Id: typeof GenericId;
 
 /**
  * A type describing your Convex data model.

examples/convex/convex/_generated/dataModel.js

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/**
+ * Generated data model types.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by [email protected].
+ * To regenerate, run `npx convex codegen`.
+ * @module
+ */
+
+import { GenericId } from "convex/values";
+
+/**
+ * An identifier for a document in Convex.
+ *
+ * Convex documents are uniquely identified by their `Id`, which is accessible
+ * on the `_id` field. To learn more, see [Data Modeling](https://docs.convex.dev/using/data-modeling).
+ *
+ * Documents can be loaded using `db.get(id)` in query and mutation functions.
+ *
+ * **Important**: Use `myId.equals(otherId)` to check for equality.
+ * Using `===` will not work because two different instances of `Id` can refer
+ * to the same document.
+ */
+export const Id = GenericId;

examples/convex/convex/_generated/react.ts examples/convex/convex/_generated/react.d.ts

@@ -4,15 +4,22 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@0.1.9.
+ * Generated by convex@0.2.0.
  * To regenerate, run `npx convex codegen`.
  * @module
  */
 
-import type getCounter from "../getCounter";
-import type incrementCounter from "../incrementCounter";
-import type { OptimisticLocalStore as GenericOptimisticLocalStore } from "convex/browser";
-import type { ClientMutation, ClientQuery } from "convex/server";
+import type {
+  ApiFromModules,
+  OptimisticLocalStore as GenericOptimisticLocalStore,
+} from "convex/browser";
+import type {
+  UseQueryForAPI,
+  UseMutationForAPI,
+  UseConvexForAPI,
+} from "convex/react";
+import type * as getCounter from "../getCounter";
+import type * as incrementCounter from "../incrementCounter";
 
 /**
  * A type describing your app's public Convex API.
@@ -23,16 +30,10 @@ import type { ClientMutation, ClientQuery } from "convex/server";
  * This type should be used with type-parameterized classes like
  * `ConvexReactClient` to create app-specific types.
  */
-export type ConvexAPI = {
-  queries: {
-    getCounter: ClientQuery<typeof getCounter>;
-  };
-  mutations: {
-    incrementCounter: ClientMutation<typeof incrementCounter>;
-  };
-};
-
-import { makeUseQuery, makeUseMutation, makeUseConvex } from "convex/react";
+export type ConvexAPI = ApiFromModules<{
+  getCounter: typeof getCounter;
+  incrementCounter: typeof incrementCounter;
+}>;
 
 /**
  * Load a reactive query within a React component.
@@ -46,7 +47,7 @@ import { makeUseQuery, makeUseMutation, makeUseConvex } from "convex/react";
  * @param args - The arguments to the query function.
  * @returns `undefined` if loading and the query's return value otherwise.
  */
-export const useQuery = makeUseQuery<ConvexAPI>();
+export declare const useQuery: UseQueryForAPI<ConvexAPI>;
 
 /**
  * Construct a new {@link ReactMutation}.
@@ -64,7 +65,7 @@ export const useQuery = makeUseQuery<ConvexAPI>();
  * @param name - The name of the mutation.
  * @returns The {@link ReactMutation} object with that name.
  */
-export const useMutation = makeUseMutation<ConvexAPI>();
+export declare const useMutation: UseMutationForAPI<ConvexAPI>;
 
 /**
  * Get the {@link ConvexReactClient} within a React component.
@@ -73,7 +74,7 @@ export const useMutation = makeUseMutation<ConvexAPI>();
  *
  * @returns The active {@link ConvexReactClient} object, or `undefined`.
  */
-export const useConvex = makeUseConvex<ConvexAPI>();
+export declare const useConvex: UseConvexForAPI<ConvexAPI>;
 
 /**
  * A view of the query results currently in the Convex client for use within

examples/convex/convex/_generated/react.js

@@ -0,0 +1,57 @@
+/* eslint-disable */
+/**
+ * Generated React hooks.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by [email protected].
+ * To regenerate, run `npx convex codegen`.
+ * @module
+ */
+
+import {
+  useQueryGeneric,
+  useMutationGeneric,
+  useConvexGeneric,
+} from "convex/react";
+
+/**
+ * Load a reactive query within a React component.
+ *
+ * This React hook contains internal state that will cause a rerender whenever
+ * the query result changes.
+ *
+ * This relies on the {@link ConvexProvider} being above in the React component tree.
+ *
+ * @param name - The name of the query function.
+ * @param args - The arguments to the query function.
+ * @returns `undefined` if loading and the query's return value otherwise.
+ */
+export const useQuery = useQueryGeneric;
+
+/**
+ * Construct a new {@link ReactMutation}.
+ *
+ * Mutation objects can be called like functions to request execution of the
+ * corresponding Convex function, or further configured with
+ * [optimistic updates](https://docs.convex.dev/using/optimistic-updates).
+ *
+ * The value returned by this hook is stable across renders, so it can be used
+ * by React dependency arrays and memoization logic relying on object identity
+ * without causing rerenders.
+ *
+ * This relies on the {@link ConvexProvider} being above in the React component tree.
+ *
+ * @param name - The name of the mutation.
+ * @returns The {@link ReactMutation} object with that name.
+ */
+export const useMutation = useMutationGeneric;
+
+/**
+ * Get the {@link ConvexReactClient} within a React component.
+ *
+ * This relies on the {@link ConvexProvider} being above in the React component tree.
+ *
+ * @returns The active {@link ConvexReactClient} object, or `undefined`.
+ */
+export const useConvex = useConvexGeneric;

examples/convex/convex/_generated/server.ts examples/convex/convex/_generated/server.d.ts

@@ -4,14 +4,14 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@0.1.9.
+ * Generated by convex@0.2.0.
  * To regenerate, run `npx convex codegen`.
  * @module
  */
 
 import {
-  makeQuery,
-  makeMutation,
+  MutationBuilderForDataModel,
+  QueryBuilderForDataModel,
   QueryCtx as GenericQueryCtx,
   MutationCtx as GenericMutationCtx,
   DatabaseReader as GenericDatabaseReader,
@@ -27,7 +27,7 @@ import { DataModel } from "./dataModel.js";
  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
  */
-export const query = makeQuery<DataModel>();
+export declare const query: QueryBuilderForDataModel<DataModel>;
 
 /**
  * Define a mutation in this Convex app's public API.
@@ -37,7 +37,7 @@ export const query = makeQuery<DataModel>();
  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
  */
-export const mutation = makeMutation<DataModel>();
+export declare const mutation: MutationBuilderForDataModel<DataModel>;
 
 /**
  * A set of services for use within Convex query functions.
@@ -62,7 +62,7 @@ export type MutationCtx = GenericMutationCtx<DataModel>;
  * An interface to read from the database within Convex query functions.
  *
  * The two entry points are {@link DatabaseReader.get}, which fetches a single
- * document by its {@link Id}, or {@link DatabaseReader.table}, which starts
+ * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
  * building a query.
  */
 export type DatabaseReader = GenericDatabaseReader<DataModel>;

examples/convex/convex/_generated/server.js

@@ -0,0 +1,32 @@
+/* eslint-disable */
+/**
+ * Generated utilities for implementing server-side Convex query and mutation functions.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by [email protected].
+ * To regenerate, run `npx convex codegen`.
+ * @module
+ */
+
+import { queryGeneric, mutationGeneric } from "convex/server";
+
+/**
+ * Define a query in this Convex app's public API.
+ *
+ * This function will be allowed to read your Convex database and will be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export const query = queryGeneric;
+
+/**
+ * Define a mutation in this Convex app's public API.
+ *
+ * This function will be allowed to modify your Convex database and will be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export const mutation = mutationGeneric;

examples/convex/convex/getCounter.ts

@@ -2,7 +2,7 @@ import { query } from './_generated/server'
 
 export default query(async ({ db }, counterName: string): Promise<number> => {
   const counterDoc = await db
-    .table('counter_table')
+    .query('counter_table')
     .filter((q) => q.eq(q.field('name'), counterName))
     .first()
   console.log('Got stuff')

examples/convex/convex/incrementCounter.ts

@@ -3,7 +3,7 @@ import { mutation } from './_generated/server'
 export default mutation(
   async ({ db }, counterName: string, increment: number) => {
     const counterDoc = await db
-      .table('counter_table')
+      .query('counter_table')
       .filter((q) => q.eq(q.field('name'), counterName))
       .first()
     if (counterDoc === null) {