What do you think of creating a way to load mutations/queries from a package?

[juliogarciag]

So, let's say I want to create a package that has some mutations and queries in it and a component that uses it, and I want to bring those parts (the queries, the mutations and the component) into a Blitz app I already have. I haven't found a way to do it because queries and mutations are loaded from the file system, and a npm package mutations or queries folders aren't supossed to be read and transformed when using useQuery or useMutation.

My main motivation is that I want to have something similar to Rails engines, and ActiveStorage, which allows to inject a kind of isolated small application into a bigger one. For example, a blitz-file-uploader component coming with all the necessary queries and mutations would be something interesting.

What do you think about it? Or, more specifically, what do you think of allowing to load queries and mutations from somewhere inside node_modules?

[cherta]

I think this concept can be extended to anything really. A package could potentially provide pages, components, mutations, and queries.

The main drawback is making the framework "too magic" like RoR feels. For example, when installing the devise gem in Rails you get new controllers, views, and methods on the User model. This is not very obvious for the less experienced, but I agree it's a powerful tool.

[juliogarciag]

I'd say we could make the process explicit, so the user can inject those provided parts using code (or the blitz config file), so they know what's coming with the package.

[MrLeebo]

The other drawback is that it would necessitate an entire cottage industry of support/helper utilities for setting the "attachments" for pages, mutations, queries, and custom APIs, such as layouts, middleware, static/server rendering options, API configs, etc...

Non-exhaustive list of stuff you'd either lose access to or there would have to be alternate APIs for:

// page layouts
Page.getLayout = (page) => <Layout>{page}</Layout>

// page authentication/redirects
Page.authenticate = true

// page static paths/server side rendering
export async function getServerSideProps() { return { props: {} } }

// query/mutation middleware
export const middleware = [myMiddleware]

// api config
export const config = { api: { bodyParser: { sizeLimit: "1mb" } } }

I think even if a package was adding pages that you wanted in your app, you'd still want to be able to set the Layout and authentication logic for that page to match the look and feel of your app.

It would make sense for that package to export a component that could render any page contents it needed to based on a dynamic route segment which you put in the file name. That way you only have to add one page to your app to get X pages out of the package and you still have access to getLayout/authenticate.

[flybayer]

I think something like this would be very cool and definitely has some merits. I think the challenge is finding the right implementation/integration strategy.

I'd love to see more discussion on this.