Next.js Example Repo

[masnwilliams]

I think it might help if you could link to an example repo that has everything set up in it. This is almost always the best way to display how a project like this is set up.

I tried following the instructions but ran into issues along the way. (maybe the instructions are out of date?)

[andyjy]

Yes, fair (see 2nd TODO at top of Readme 😉 )

I was essentially lazy-executing those tasks conditional upon someone showing interest in it being worthwhile. Instructions are up-to-date but not necessarily error/omission-free - you're probably the first to try following them 🙏

Feel free to share any context on the issues you hit, and separately I'll try pull together a working example - hopefully within the next day or two.

[masnwilliams]

see 2nd TODO at top of Readme 😉

Ah, yes haha! Didn't catch that

you're probably the first to try following them

I ran into this exact issue when integrating inngest into one of my projects, which then made me want to implement edge.

Feel free to share any context on the issues you hit, and separately I'll try pull together a working example - hopefully within the next day or two.

Will do and that would be amazing. That is the big downside to the data proxy rn and I'm surprised they released it without having a way to develop on a local db with it 😂

[andyjy]

@masnwilliams Next.js example added, let me know if you run into issues with it.

Still TODO: update the Readme with a few corrections discovered while creating the example 🙈 - basic structure still applies, just some typos in the code snippets with incorrect variable names etc causing the code not to work.

[masnwilliams]

Amazing!! Will try it out tonight and let you know how it goes 👍

[masnwilliams]

Ok, and so to throw another loop into this. If I were to go at this with Next.js 13 using the new App Router, I don't think it would work at all which is unfortunate because that is what I'm using 😂

I think the api routes would be fine but its throwing the module not found: "crypto" error:

Then also with the withLocalProxyPre() and withLocalProxyPost() functions, they want a context argument passed in. I assume its ok to just pass in () => {}?

[masnwilliams]

Then once those are solved, I am still getting this error:

- error Error [InvalidDatasourceError]: Datasource URL must use prisma:// protocol when --accelerate or --data-proxy are used

[andyjy]

Gah - I believe I fixed these errors but critically disguised the update to the library code within my commit adding the example (and didn't republish to npm). So I suspect you didn't pull the updated version?

Does checking out the repo and running the example as-is work for you? Should fix that Datasource URL error also.

with Next.js 13 using the new App Router, I don't think it would work at all

It should be possible to get this approach working with any framework/router.. although I published v0.1 to npm, it's definitely still proof-of-concept rather than fully-fledged library yet.

Needs transpiling to a javascript dist build for starters; also no need to depend on Next.js, the server script can be updated to work under any plain Node server (by removing use of the Next.js request/response helpers).

[andyjy]

Updated readme, tidied a bit more, published v0.2.0 to npm

[masnwilliams]

Needs transpiling to a javascript dist build for starters; also no need to depend on Next.js, the server script can be updated to work under any plain Node server (by removing use of the Next.js request/response helpers).

Agreed, I think this will be the step needed to make this work for a far larger audience. I'm still getting a type error in prisma-local-proxy when passing in request. I assume just moving it to a standard node server will solve. Here's the code I used for my app router app:

import { proxy } from 'prisma-local-proxy/server'
import { PrismaClient } from '../../../../prisma/prisma-local-proxy-client'
import { NextRequest, NextResponse } from 'next/server'

const prisma = new PrismaClient()

export const GET = async (req: NextRequest) => {
  await proxy(req, new NextResponse(), prisma)
}

[masnwilliams]

Also getting a webpack error, which I think its from transpiling the package?

<w> [webpack.cache.PackFileCacheStrategy] Restoring pack from /******/.next/cache/webpack/server-development.pack.gz failed: TypeError: Cannot read properties of undefined (reading 'hasStartTime')

Another thing was that I had to install @types/ungap__structured-clone for some dep. Probably just include that in the package?

[masnwilliams]

Good news is that I am able to detect my inngest server, just need to nail down some small issues and it should be pretty solid!

[andyjy]

I'm still getting a type error in prisma-local-proxy when passing in request.

Yes, the current server implementation is for the Next.js pages/api API Routes (with NextAPIRequest and NextAPIResponse) - see example. It will require an update to work with the App Router Route Handlers (with web Request and Response). (see https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#api-routes) You can still host the server handler under pages/api, even while using the app router for your app itself - just copy from the example.

Another thing was that I had to install @types/ungap__structured-clone for some dep

Ah yes - I have that as a devDependency for types but since the package is currently published with the typescript rather than transpiled javascript it needs to be moved to a normal dependency (or just add javascript transpiling).

Mostly offline until Monday now but will follow up to incorporate this feedback. Cheers!