Initial commit from Create Next App

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierignore

@@ -0,0 +1,2 @@
+.next
+convex/_generated

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}

README.md

@@ -0,0 +1,47 @@
+# Convex
+
+This example demonstrates the Convex global state management framework.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/convex&project-name=convex&repository-name=convex)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example convex convex-app
+# or
+yarn create next-app --example convex convex-app
+# or
+pnpm create next-app --example convex convex-app
+```
+
+Log in to Convex,
+
+```bash
+npx convex login
+```
+
+initialize a new Convex project,
+
+```bash
+npx convex init
+```
+
+and then run the following two commands in two different terminals:
+
+```bash
+npx convex dev
+```
+
+```bash
+npm run dev
+```
+
+Once everything is working, commit your code and deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+Use `npx convex deploy && npm run build` as the build command and set the `CONVEX_DEPLOY_KEY` environmental variable in Vercel ([Documentation](https://docs.convex.dev/getting-started/deployment/hosting/vercel)).

convex/README.md

@@ -0,0 +1,29 @@
+# Welcome to your Convex functions directory!
+
+Write your Convex functions here.
+
+A query function looks like:
+
+```typescript
+// myQueryFunction.ts
+import { query } from './_generated/server'
+
+export default query(async ({ db }) => {
+  // Load data with `db` here!
+})
+```
+
+A mutation function looks like:
+
+```typescript
+// myMutationFunction.ts
+import { mutation } from './_generated/server'
+
+export default mutation(async ({ db }) => {
+  // Edit data with `db` here!
+})
+```
+
+The Convex CLI is your friend. See everything it can do by running
+`npx convex -h` in your project root directory. To learn more, launch the docs
+with `npx convex docs`.

convex/_generated/dataModel.ts

@@ -0,0 +1,60 @@
+/* eslint-disable */
+/**
+ * Generated data model types.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by [email protected].
+ * To regenerate, run `npx convex codegen`.
+ * @module
+ */
+
+import { AnyDataModel } from "convex/server";
+import { GenericId } from "convex/values";
+
+/**
+ * No `schema.ts` file found!
+ *
+ * This generated code has permissive types like `Document = any` because
+ * Convex doesn't know your schema. If you'd like more type safety, see
+ * https://docs.convex.dev/using/schemas for instructions on how to add a
+ * schema file.
+ *
+ * After you write a schema, rerun codegen with `npx convex codegen`.
+ */
+
+/**
+ * The names of all of your Convex tables.
+ */
+export type TableNames = string;
+
+/**
+ * The type of a document stored in Convex.
+ */
+export type Document = any;
+
+/**
+ * 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 type Id = GenericId<string>;
+export const Id = GenericId;
+
+/**
+ * A type describing your Convex data model.
+ *
+ * This type includes information about what tables you have, the type of
+ * documents stored in those tables, and the indexes defined on them.
+ *
+ * This type is used to parameterize methods like `queryGeneric` and
+ * `mutationGeneric` to make them type-safe.
+ */
+export type DataModel = AnyDataModel;

convex/_generated/react.ts

@@ -0,0 +1,82 @@
+/* eslint-disable */
+/**
+ * Generated React hooks.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by [email protected].
+ * 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";
+
+/**
+ * A type describing your app's public Convex API.
+ *
+ * This `ConvexAPI` type includes information about the arguments and return
+ * types of your app's query and mutation functions.
+ *
+ * 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";
+
+/**
+ * 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 = makeUseQuery<ConvexAPI>();
+
+/**
+ * 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 = makeUseMutation<ConvexAPI>();
+
+/**
+ * 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 = makeUseConvex<ConvexAPI>();
+
+/**
+ * A view of the query results currently in the Convex client for use within
+ * optimistic updates.
+ */
+export type OptimisticLocalStore = GenericOptimisticLocalStore<ConvexAPI>;

convex/_generated/server.ts

@@ -0,0 +1,79 @@
+/* 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 {
+  makeQuery,
+  makeMutation,
+  QueryCtx as GenericQueryCtx,
+  MutationCtx as GenericMutationCtx,
+  DatabaseReader as GenericDatabaseReader,
+  DatabaseWriter as GenericDatabaseWriter,
+} from "convex/server";
+import { DataModel } from "./dataModel.js";
+
+/**
+ * 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 = makeQuery<DataModel>();
+
+/**
+ * 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 = makeMutation<DataModel>();
+
+/**
+ * A set of services for use within Convex query functions.
+ *
+ * The query context is passed as the first argument to any Convex query
+ * function run on the server.
+ *
+ * This differs from the {@link MutationCtx} because all of the services are
+ * read-only.
+ */
+export type QueryCtx = GenericQueryCtx<DataModel>;
+
+/**
+ * A set of services for use within Convex mutation functions.
+ *
+ * The mutation context is passed as the first argument to any Convex mutation
+ * function run on the server.
+ */
+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
+ * building a query.
+ */
+export type DatabaseReader = GenericDatabaseReader<DataModel>;
+
+/**
+ * An interface to read from and write to the database within Convex mutation
+ * functions.
+ *
+ * Convex guarantees that all writes within a single mutation are
+ * executed atomically, so you never have to worry about partial writes leaving
+ * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)
+ * for the guarantees Convex provides your functions.
+ */
+export type DatabaseWriter = GenericDatabaseWriter<DataModel>;

convex/getCounter.ts

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

convex/incrementCounter.ts

@@ -0,0 +1,22 @@
+import { mutation } from './_generated/server'
+
+export default mutation(
+  async ({ db }, counterName: string, increment: number) => {
+    const counterDoc = await db
+      .table('counter_table')
+      .filter((q) => q.eq(q.field('name'), counterName))
+      .first()
+    if (counterDoc === null) {
+      db.insert('counter_table', {
+        name: counterName,
+        counter: increment,
+      })
+      // console.log messages appear in your browser's console and the Convex dashboard.
+      console.log('Created counter.')
+    } else {
+      counterDoc.counter += increment
+      db.replace(counterDoc._id, counterDoc)
+      console.log(`Value of counter is now ${counterDoc.counter}.`)
+    }
+  }
+)