magicseth•3y ago

Vue client

I'm looking at making a Vue client. Are there any examples of using ConvexHttpClient to subscribe to updates on a query?

31 Replies

ballingt•3y ago

That's awesome! I'd use the InternalConvexClient instead; yes it's internal and it might change, but it's the way we've been building other clients. https://docs.convex.dev/api/classes/browser.InternalConvexClient#constructor

Class: InternalConvexClient | Convex Developer Hub

browser.InternalConvexClient

jamwt•3y ago

Example of using it here: https://github.com/jamwt/solid-convex

GitHub

GitHub - jamwt/solid-convex: A simple app demonstrating using Solid...

A simple app demonstrating using SolidJS with Convex - GitHub - jamwt/solid-convex: A simple app demonstrating using SolidJS with Convex

magicsethOP•3y ago

Thanks!

jamwt•3y ago

Specifically this file: https://github.com/jamwt/solid-convex/blob/main/src/cvxsolid.ts

GitHub

solid-convex/cvxsolid.ts at main · jamwt/solid-convex

A simple app demonstrating using SolidJS with Convex - solid-convex/cvxsolid.ts at main · jamwt/solid-convex

magicsethOP•3y ago

@jamwt is there a video of you writing this code somewhere? nevermind, I got the vue wrapper working

jamwt•3y ago

https://www.youtube.com/watch?v=5Gck3MsGl5Y

Jamie Turner

YouTube

Let's use Convex with SolidJS!

We run through the basics of SolidJS (https://www.solidjs.com/) and Convex (https://convex.dev), two cool new technologies in the web development space. Then, we build a simple library to combine them to make globally reactive state. SolidJS is a reactive web framework that is a compelling alternative to React, and Convex is a global state mana...

jamwt•3y ago

nice! @magicseth we'd love it if you could share some code when you have it other people have asked about vue as well I made a project + binding using Svelte the other day, but I don't think anyone on the team has tried it with vue yet

magicsethOP•3y ago

import { onUnmounted, ref, type Ref } from "vue";

// Create a reactive ref for Vue
export function createQuery<T>(
  queryPath: string,
  args?: any[]
): Ref<T | undefined> {
  const convex = ConvexContext.value;
  if (convex === undefined) {
    throw "No convex context";
  }
  const fullArgs = args ?? [];

  const resultRef = ref<T>();
  function setter(value: any) {
    resultRef.value = value;
  }
  const queryToken = convex!.addSub(setter, queryPath, fullArgs);
  onUnmounted(() => {
    console.log("unsubscribing on onmount");
    convex.rmSub(queryToken);
  });
  return resultRef;
}

import { onUnmounted, ref, type Ref } from "vue";

// Create a reactive ref for Vue
export function createQuery<T>(
  queryPath: string,
  args?: any[]
): Ref<T | undefined> {
  const convex = ConvexContext.value;
  if (convex === undefined) {
    throw "No convex context";
  }
  const fullArgs = args ?? [];

  const resultRef = ref<T>();
  function setter(value: any) {
    resultRef.value = value;
  }
  const queryToken = convex!.addSub(setter, queryPath, fullArgs);
  onUnmounted(() => {
    console.log("unsubscribing on onmount");
    convex.rmSub(queryToken);
  });
  return resultRef;
}

everything else is pretty much the same ref is Vue's reactive thingamajig you return the ref which you then use in your view code the setter updates it, and it gets updated the onUnmountedHook cleans up at the end I wish it were a little easier to understand how to pipe through the right types

jamwt•3y ago

thanks for sharing! What do you mean by pipe through the right types? you're saying because our react library has lots of codegen that gives you typing information about backend data + functions, and you'd like to replicate that with e.g. vue?

magicsethOP•3y ago

yep, I'd like to createQuery("listMessages") to return Ref<Message[]> or something equivalent

jamwt•3y ago

gotcha. yeah, there's a ton of codegen hijinks that @alexcole led to make that possible in react. probably a big lift to recreate unfortunately

alexcole•3y ago

@magicseth if you're willing to dig into how the React client works a bit it should be possible! The overall idea is that in _generated/api.d.ts we create a huge API type that includes information about all of your query and mutation functions. The ConvexReactClient is type parameterized over this API type. Then each of the methods on it use type helpers in our npm package from convex/api that extract out useful bits (like QueryNames<API> returns a type union of all the names of queries that youve defined). The types/api/index.d.ts file in our npm package should help quite a bit (all of these helpers have good docstrings). Let me know if you have questions! I have a half-finished blog post about how we did all of this. I should really wrap it up and publish it

magicsethOP•3y ago

I'm able to steal a lot of the types from the react world, as they're not react specific I'm pretty close:

magicsethOP•3y ago

magicsethOP•3y ago

somehow it's not getting the correct return parameter

magicsethOP•3y ago

alexcole•3y ago

I can't tell from this example, but what is API? Is it possible you're mixing up the DataModel and API types? Looks like createQuery is a static function? In that case, you may want to follow the pattern we use for hooks like useQuery in react.d.ts. useQuery is defined with a simple, loose type are then we alias it to be a type specific to your API in the generated code.

magicsethOP•3y ago

Reading screenshots may not be the best way to debug 😉

alexcole•3y ago

Hmm... yeah that API type looks wrong. Some quick ideas: - maybe rerun npx convex codegen in case it's' out of date? - restart the VSCode TypeScript server (I've seen bugs before...) Otherwise wanna pair on it tomorrow? You seem super close so it would be cool to get this working

magicsethOP•3y ago

@alexcole Sounds good

FlipOneUp•3y ago

I'm drawn to Convex, but I use Svelte, not React. Any ETA for Convex Svelte functions and Svelte/SvelteKit articles, tutorials and best practices?

jamwt•3y ago

we're unlikely to add super-official support for any particular second framework to the degree we've done React until our team gets a bit bigger -- though Svelte is probably the leading candidate for the next one we support. However, (a) binding to the client-side intermediate convex library is fairly easy to do so other frameworks can get involved ( see https://docs.convex.dev/api/classes/browser.InternalConvexClient )

Class: InternalConvexClient | Convex Developer Hub

browser.InternalConvexClient

jamwt•3y ago

(b) here's my repo where I've done this for Svelte, just to give you a really good head start: https://github.com/jamwt/svelte-convex

GitHub

GitHub - jamwt/svelte-convex: Quick, rough example using Convex wit...

Quick, rough example using Convex with Svelte. Contribute to jamwt/svelte-convex development by creating an account on GitHub.

jamwt•3y ago

in particular, this file is the magic adapter that creates a Svelte "store" using your convex deployment: https://github.com/jamwt/svelte-convex/blob/main/src/lib/convexSvelteClient.ts

GitHub

svelte-convex/convexSvelteClient.ts at main · jamwt/svelte-convex

Quick, rough example using Convex with Svelte. Contribute to jamwt/svelte-convex development by creating an account on GitHub.

jamwt•3y ago

and (c), to be honest, the Convex team and this community in general pretty much help out anyone trying any configuration with Convex. so if you run into any issues and let us know, we'll take a look and help unblock! for example, I know @casado has built a pretty involved bridge himself to a custom environment using InternalConvexClient . and we have other folks using vue or solidjs in a similar fashion

casado•3y ago

Yeah, I use InternalConvexClient directly since I'm building on pure Javascript with pixi.js and no web framework. It works great. Over time it would be nice to see performance optimizations drop to InternalConvexClient (e.g. d duping replicated state in queue convoys) since I believe a lot can be done that is framework agnostic.

FlipOneUp•3y ago

Great to know Svelte's on your mind. React has a huge user base, but it's become a crowded market for realtime DBs who've been there first. With Svelte(Kit), I believe you'll be one of the few first in with Svelte focus and likely would get a bigger mindshare among Svelte devs. So eagerly looking forward to it.

Vue client

Did you find this page helpful?