It only took me a year but I finally figured out how to type a Vue Input component.

Unlike React, Vue doesn't ship with synthetic types for inputs which can cause problems for Typescript.

I turned to everyone's favorite "AI" programmer, Claude, and politely asked for the solution:

<script setup lang="ts">
function 

It's always bothered me that when I share a post from this site the metadata wasn't dynamic and would be a generic image placeholder and link info (because of the nature of Single Page Applications (SPA)).

This isn't the best way to promote my posts and it's also pretty bad for my SEO scores in general, including lighthouse which is becoming an ever increasingly metric used for frontend development -- to a detriment but that's a different post.

I tried some hacky solutions...

GraphQL seemed like such a great idea when I first learned about it

Essentially it's the reinvention of an API endpoint. Instead of hitting a specific API to get back a certain set of data, let's have one endpoint that will return what's requested.

For example instead of an endpoint to retrieve a user's data, typically /user, instead pointing to /graphql and making requests against that endpoint for what a developer would like...

In the last post, I outlined how to instantiate Apollo Client between the server and client components in our application. The important takeaways were that each component type would need it's own Apollo Client instance and also that passing something like a bearer token between the two component types is possible using the cookie function as outlined in Next.js's documentation.

Of course, using cookies, or even local storage for that matter, is a very poor way of managing data, and...

Being the loyalist that I am to Apollo GraphQL (so that we can interface with the Strawberry GraphQL backend), we're going to use Apollo with our React Server Components as outlined in this blog post about how to use it's experimental RSC plugin to deal with the use client/use server dynamic - How to Use Apollo Client with Next.js 13.

The most important concept...