18 replies

Awkward property access .default when using default export folder structure

Hey,

I've come across a situation where I'm required to access the API object in a mutation using .default.

Relevant code:

import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
                                               ↓↓↓↓↓
const storeUser = useMutation(api.users.store.default);

import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
                                               ↓↓↓↓↓
const storeUser = useMutation(api.users.store.default);

import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
                                               ↓↓↓↓↓
const storeUser = useMutation(api.users.store.default);

import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
                                               ↓↓↓↓↓
const storeUser = useMutation(api.users.store.default);

In my store.ts file, I'm exporting the mutation as a default export. However, I find the usage of .default in the useMutation hook to be a bit awkward. I'm wondering if there's a way around this, or if there's a different recommended approach for accessing the API object in a mutation.

Folder structure:

convex/
├── _generated/
│   ├── api.ts
│   └── dataModel.ts
├── users/
│   └── store.ts ← ← ← ←

convex/
├── _generated/
│   ├── api.ts
│   └── dataModel.ts
├── users/
│   └── store.ts ← ← ← ←

convex/
├── _generated/
│   ├── api.ts
│   └── dataModel.ts
├── users/
│   └── store.ts ← ← ← ←

convex/
├── _generated/
│   ├── api.ts
│   └── dataModel.ts
├── users/
│   └── store.ts ← ← ← ←

Just a mild annoyance, when trying to keep things neat.

Awkward property access .default when using default export folder structure

Similar Threads

Similar Threads

Similar Threads