Extract useMutation logic

[cyrus-za]

What do you want and why?

Hi Blitz community. I've seen a lot o the talks by @flybayer and love the concept of blitz. I've been using next.js since 2017 and used prisma on/off since the graphcool days and switched to prisma 2 when it became production ready.

Unfortunately, I am not able to use blitz with our current complex setup of several microservices and different frontend apps talking to these services. I am, however using next, prisma and nx and I'm busy building a new app in our monorepo, but this time I decided not to use graphql or a rest api. So far it's been working great with fetching data via SSR/SSG, but I am at the stage where I need to start building user interaction pieces which need to update data in the db and that obviously cannot be done from the browser. Rather than creating endpoint in pages/api/* for each mutation, I'd much rather have some clever way to call a function that invokes a prisma method and simply call that function over the wire. Then I thought to myself, this sounds like the old RPC days and I recalled Blitz taking that approach.

Unfortunately, installing the whole blitz is not suitable, so I'd like to get to a point where blitz itself can be broken into smaller exposed packages, so we can use the whole useMutation approach without running it inside a blitz app. This will lead to bigger adoption and could eventually get people to fully switch to blitz, but this incremental step is important for those who have legacy monorepos with multiple services and cannot simply switch to blitz right away.

[cyrus-za]

Update: I just found this: https://github.com/prisma/prisma/tree/master/src/packages/react-prisma

They created it yesterday it seems. Those not familiar with React Server Components, check this out.

[KATT]

Sounds like you're after the same thing as me, I want e2e-type-safety and no API-wiring, I find https://github.com/colinhacks/trpc interesting.

You won't be able to do mutations in react server components afaik

[KATT]

I've also been at it from the same thing in general, it would be nice to have a way for existing Next.js users to easily plug in to the blitz magic.

[cyrus-za]

You won't be able to do mutations in react server components afaik

I am aware, but the react-prisma plugin could evolve to more than just server components. They could add useMutation code from blitz into that package or build something similar.

[flybayer]

This does sound nice, but I'm not sure it's possible 🤔 Because all the magic comes from our custom compiler that moves around files and adds custom code. If it was just code changes it could be done via webpack/babel, but it also requires moving files since Next.js is very file-based.

So instead of extracting it, maybe it's easier to address issues preventing you from using Blitz? For example you should be able to take an existing next.js app and convert it to blitz by renaming next.config.js to blitz.config.js and everything should work. Then you can start using the magic queries/mutations in a few places as you need.

[cyrus-za]

Is it really that simple? no need to scafold a new blitz app? No opinionated folder structure?

I am using Nx workspaces for the monorepo, which has built in nextjs support but no official blitz support just yet

[cyrus-za]

@Flavyoo I tried it out. I get

You are using beta software - if you have any problems, please open an issue here:
      https://github.com/blitz-js/blitz/issues/new/choose

 ›   Error: You are not inside a Blitz project, so this command won't work.
 ›   You can create a new app with blitz new myapp or see help with blitz help

Can you please explain how the file moving is required to extract the useMutation logic to a package?

[flybayer]

Is it really that simple? no need to scafold a new blitz app? No opinionated folder structure?

Yes!

Did you do all the following?

• Rename next.config.js to blitz.config.js
• Remove next dependency
• Add blitz dependency

[cyrus-za]

Yes I did, but its not working inside a nx workspace.

I created a repo to show the issue. Steps I took to produce the repo

1. run yarn create nx-workspace, give a name to the org (my-org) and select next.js and name the app blitz-app (select CSS and No for cloud)
2. run cd my-org && yarn
3. run rm package-lock.json
4. run mv apps/blitz-app/next.config.js apps/blitz-app/blitz.config.js
5. run yarn add blitz
6. run yarn remove next
7. edit workspace.json to make serve run command blitz start

       "serve": {
          "executor": "@nrwl/workspace:run-commands",
          "options": {
            "command": "yarn blitz start",
            "cwd": "apps/blitz-app"
          }
        },

8. run yarn nx run blitz-app:serve

I opened a issue with nx to support blitz. Let's see if someone is willing to build a plugin for it.

Maybe best if someone who knows blitz inside builds it. Here's a guide on how to build plugins
https://nx.dev/latest/react/plugins/nx-plugin/overview

[flybayer]

Hmm yeah looks like an nx issue at least at this point.

Think this original issue can be closed?

[cyrus-za]

Well the original issue is not about running blitz in nx. It is about a standalone package for useMutation functionality. I get that files need to be moved at build time to achieve this, but maybe the babel plugin and webpack loader etc can be exposed too?

[andreasasprou]

Hacked it together and it seems to be working (still some things to figure out!)

https://www.loom.com/share/4d22ea7376c042558aa12c71056e6676

[cyrus-za]

@flybayer check this out ☝🏻

[cyrus-za]

Also see issue on nx side: nrwl/nx#4482

[flybayer]

@cyrus-za I don't have time at the moment to dig into the nx stuff, but would definitely take a PR!