David Alonso•2w ago

Connect to multiple projects from the same nextjs app

Is this a matter of having the right imports for types and having multiple convex folders? I’m curious if anyone has tried this. Basically being able to call functions in different projects in different parts of the app. With the firestore sdk for instance you can define as many db objects as you want

28 Replies

Convex Bot•2w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•2w ago

Haven't done this myself, but would have to be a monorepo where each convex folder is in a separate package, as convex dev won't run if your current directory doesn't have a package.json. I think the main challenge would be client side as react context is used, so furthest one down wins. Genuinely curious what the goal is here

David AlonsoOP•2w ago

Use case: Picture a Convex integration for https://fireview.dev (which is built on Convex)

Fireview - The Firestore Console You Deserve

Fireview helps your team manage and visualize your Firestore data with ease.

David AlonsoOP•2w ago

We wanna show data in a single page coming from different projects (similar to what we do for different Firestore projects already) Some of the data is stored in our convex db (eg dashboard config) but the actual data in the dashboard is coming from customers There’s another experimental idea i have this could be interesting for, where some code is generated on behalf of the parent project that gets pushed and used in a child project which gets called in the same app

erquhart•2w ago

Ah okay, this is meta stuff. That would be really cool. I think of the "slightly stale, queryable snapshot" concept that Jamie has mentioned vs having convex websockets running direct on all projects. Curious how the team responds here. Would love to try out Fireview on my Convex data!

David AlonsoOP•7d ago

This is what kapa on the Convex docs gave me: Certainly! I'll explain how to use the ConvexReactClient to communicate between different Convex projects in a React application. The approach is similar to using the ConvexClient, but it's tailored for React components. Here's how you would set this up using the ConvexReactClient: 1. First, you need to create separate ConvexReactClients for each project:

import { ConvexReactClient } from "convex/react";

const clientA = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL_A);
const clientB = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL_B);

import { ConvexReactClient } from "convex/react";

const clientA = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL_A);
const clientB = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL_B);

2. Then, you need to wrap your app with ConvexProviders for each client:

import { ConvexProvider } from "convex/react";

function App() {
  return (
    <ConvexProvider client={clientA}>
      <ConvexProvider client={clientB}>
        {/* Your app components */}
      </ConvexProvider>
    </ConvexProvider>
  );
}

import { ConvexProvider } from "convex/react";

function App() {
  return (
    <ConvexProvider client={clientA}>
      <ConvexProvider client={clientB}>
        {/* Your app components */}
      </ConvexProvider>
    </ConvexProvider>
  );
}

3. In your React components, you can use the useQuery:

import { useQuery } from "convex/react";
import { api as apiA } from "./convex_a/_generated/api";
import { api as apiB } from "./convex_b/_generated/api";

function MyComponent() {
  const resultA = useQuery(apiA.myQueryA, { arg1: "value1" });
  const resultB = useQuery(apiB.myQueryB, { arg2: "value2" });

  return (
    // Render your component using resultA and resultB
  );
}

import { useQuery } from "convex/react";
import { api as apiA } from "./convex_a/_generated/api";
import { api as apiB } from "./convex_b/_generated/api";

function MyComponent() {
  const resultA = useQuery(apiA.myQueryA, { arg1: "value1" });
  const resultB = useQuery(apiB.myQueryB, { arg2: "value2" });

  return (
    // Render your component using resultA and resultB
  );
}

Remember that this approach still requires you to manage authentication and security between the projects. Also, you'll need to ensure that you're using the correct client for each project's API. For more detailed information on using the ConvexReactClient, you can refer to the Convex React documentation. This setup allows you to interact with multiple Convex projects within a single React application, but keep in mind that each project still maintains its own separate backend and database.

Convex React | Convex Developer Hub

Convex React is the client library enabling your React application to interact

David AlonsoOP•7d ago

I'm not sure about the file structure aspect... if you can actually do convex_a/ convex_b/

erquhart•7d ago

I'd have to look at the provider source but I'd be surprised if the inner provider didn't override the outer, or result in strange side effects, but definitely worth a try

deen•6d ago

I talked about this a bit here https://discord.com/channels/1019350475847499849/1312965703690620968 I'm yet to try multi-provider React apps, but I'd lean towards blindly trusting it will just work because the devs are good 😇 I'd be really wary about nesting the providers like that thought, it could be a painful debug if things ever start to get weird - especially with auth involved. If one convex is more of a side-piece to your "main" one - you could try using the "basic" client, or even just one-off requests with the http client. Kinda like a typed fetch... throw in some useEffects, context providers - just like the good old days. Hell you could even add Redux. could be fun!

ballingt•6d ago

What Kapa suggests here looks broken, but we use some multi-provider React setup in the dashboard, it's always the nearest ancestor provider that's used. You have to keep the api objects straight yourself, just like you have to keep the providers straight yourself because TypeScript can't help with the React tree heirarchy

deen•6d ago

You should definitely have these in seperate packages. An easier option when experimenting could to use the Typescript API generator, with a seperate "convex-b" repo, and just copy the generated code across. https://stack.convex.dev/multiple-repos

Convex in Multiple Repositories

Turns out, you can organize your Convex project across multiple repositories! Check out this guide on how to implement this in your project.

ampp•6d ago

interesting, i kept thinking that id not be able to dynamically specify a new ConvexReactClient but i guess that is what you are doing on the dashboard? The first provider tells the 2nd provider what client to load? But how do you feed the 2nd convex client its own API key. This seems tempting to use for our central coordinating server eventually..

ari•6d ago

In the dashboard, we load one convex client via a ConvexProvider, and use global state for another. We use one to power loading your data, and the other for the function runner Im a fan of https://github.com/streamich/react-use/blob/master/docs/createGlobalState.md however, you can’t use useQuery, but you can call client client.query The convex dashboard copies the implementation of useQuery, but replaces the usage of the context with global state — I wouldn’t advise doing this as you’d be subject to the implementation changing as new versions of the convex package come out

GitHub

react-use/docs/createGlobalState.md at master · streamich/react-use

React Hooks — 👍. Contribute to streamich/react-use development by creating an account on GitHub.

David AlonsoOP•6d ago

Does client.query have type safety?

ari•6d ago

It should yes, but if you’re querying arbitrary deployments it may be hard to enforce that

sshader•6d ago

(it has type safety that the args + return values match up with the api.foo.bar function path you give it, but does not protect against passing in a api for the wrong Convex deployment, e.g. clientA.query(apiB.some.query, ...) would compile but fail at runtime)

David AlonsoOP•5d ago

ah okay and what about the input and output for the functions? I guess they are typed based on whatever folder api points to?

ampp•5d ago

🙃 I was totally thinking it was 1 for the convex dashboard(that owns the list of the projects/deployments) and 2 was for the selected database? It sounds more like the dashboard data is exposed via a special API going across the same web-hook connection? Interesting for who want to get into meta levels. :convex:

ari•5d ago

Yup, each deployment comes with some functions that are only queryable through the dashboard / cli

David AlonsoOP•5d ago

are these functions open source/documented somehere? I assume it's things that allow you to apply filters for instance? I know there's a thread about this somewhere but asking cause if we want to integrate Fireview with Convex this would be useful

ampp•5d ago

Assuming you make your system convex compatible. How well do you think you can handle tables that have a type string and a v.any() with possibly hundreds of shapes of data stored within it based on type?

David AlonsoOP•5d ago

not sure i quite understand, do you mean if you have unions types in your Convex tables? For Firestore (which is no-sql), we recursively infer the schema based on sample data so we could do something similar for Convex at the very least, but unions are definitely tricky to infer well

ampp•5d ago

Yeah i'm not doing unions so convex is completely unaware of the shape, i'm just keeping types in my own ORM for better or worse. With the various performance concerns and major difficulty in tracing down convex validation issues i could always add it later. We just have a table that is a external interface for all outside data in the world that could exist so we can run our algorithms against it. I need to start building components to handle the various displays of all this data so it would be nice to at least have default data shown as a best effort. In a ideal world someone could just send any object to our api and it would be processed, human-readable, and grouped.

David AlonsoOP•5d ago

This is how data shows up in Fireview

ari•5d ago

Yes, the code is open source, but it does not come with any guarantees, so these functions can change at any time Here’s the one that queries and filters data on the dashboard: https://github.com/get-convex/convex-backend/blob/main/npm-packages/system-udfs/convex/_system/frontend/paginatedTableDocuments.ts

GitHub

convex-backend/npm-packages/system-udfs/convex/_system/frontend/pag...

The Convex open-source backend. Contribute to get-convex/convex-backend development by creating an account on GitHub.

ari•5d ago

Specifically for the data page, we’ll likely be changing how this function works in the next couple momths to not allow calling filter on large tables - so you would need to add indexes to any field you want to filter by

David AlonsoOP•5d ago

Thanks for sharing! I was actually wondering how you did that. With Firestore indexes for all top level fields get created by default and users also have to create indices if they want to run a more complex query (even if it doesn’t need to be run very often) i’m wondering if you considered allowing complex queries by translating them to sql queries somehow though i have no idea if this is feasible on your side (it would probably lose realtime behavior at the very least)

ari•4d ago

I'd personally love a world where you automatically get an index for each field you add. For now, if you want flexible/complex querying we'd recommend setting up streaming export (https://docs.convex.dev/production/integrations/streaming-import-export#streaming-export)

Streaming Data in and out of Convex | Convex Developer Hub

Streaming Data in and out of Convex