[Zodios] upgrade

[ecyrbe]

Hello,

I'm happy to see an advanced project using zodios in public. If you have feedback don't hesitate to go on zodios discussion page. i'm pretty active. If you have a bug, it's the same.

This issue is just to tell you that Zodios had pretty bad Bugs that where higlighted thanks to the migration to react-query v4. If you inspect the generated bundle with your today nextjs app, you'll see some strange things with many polyfills.

The issue was fixed with new versions of zodios, just upgrade to the latests. 'v10.3.1' for core. Also there are some fixes on typesafety part, that should make your like easier.

whish you and your project all the success!

[nadilas]

Hello @ecyrbe, nice of you to chime in 🙏 Thanks for the hint, just upgraded to the latest versions.

There are currently three things, which cause somewhat of a headache:

• API resolved without sending a response for /subscriptions/asdf/seats, this may result in stalled requests.
• any kind of middleware causes the backend to exit with HTTP-500 errors and doesn't let the request through to the router methods. I haven't found your userMiddleware on the zodiac repos, which you used in the documentation, I'm probably doing something wrong.
• after upgrading to v10.3.1 I'm seeing the following error on build:

  api:build: Type error: Argument of type 'undefined' is not assignable to parameter of type 'DeepReadonlyObject<{ params: { subscriptionId: string | number; seatId: string | number; }; headers?: Partial<RawAxiosHeaders & MethodsHeaders & CommonHeaders> | undefined; transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[] | undefined; transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[] | undefined; paramsSerializer?: ParamsSerializerOptions | undefined; timeout?: number | undefined; timeoutErrorMessage?: string | undefined; withCredentials?: boolean | undefined; adapter?: AxiosAdapter | undefined; auth?: AxiosBasicCredentials | undefined; responseType?: ResponseType | undefined; responseEncoding?: string | undefined; xsrfCookieName?: string | undefined; xsrfHeaderName?: string | undefined; onUploadProgress?: ((progressEvent: AxiosProgressEvent) => void) | undefined; onDownloadProgress?: ((progressEvent: AxiosProgressEvent) => void) | undefined; maxContentLength?: number | undefined; validateStatus?: ((status: number) => boolean) | null | undefined; maxBodyLength?: number | undefined; maxRedirects?: number | undefined; maxRate?: number | [number, number] | undefined; beforeRedirect?: ((options: Record<string, any>, responseDetails: { headers: Record<string, string>; }) => void) | undefined; socketPath?: string | null | undefined; httpAgent?: any; httpsAgent?: any; proxy?: false | AxiosProxyConfig | undefined; cancelToken?: CancelToken | undefined; decompress?: boolean | undefined; transitional?: TransitionalOptions | undefined; signal?: GenericAbortSignal | undefined; insecureHTTPParser?: boolean | undefined; env?: { FormData?: (new (...args: any[]) => object) | undefined; } | undefined; formSerializer?: FormSerializerOptions | undefined; }>'.
  api:build:
  api:build:   28 |     "post",
  api:build:   29 |     "/subscriptions/:subscriptionId/seats/:seatId/request",
  api:build: > 30 |     undefined,
  api:build:      |     ^
  api:build:   31 |     {
  api:build:   32 |       onSuccess: () => invalidate(),
  api:build:   33 |     }

  Could you update the https://github.com/ecyrbe/zodios-express/blob/74ecbdef724f044dcbd475f3f9c970f57c4d6a43/examples/next/pages/index.tsx#L23-L25 sample to the latest version? I can't figure out how to call a ...[config, mutationOptions] param.

[ecyrbe]

For the third point, it's actually normal. before zodios failed to tell your you forgot to pass parameters.

to fix, just pass the required parameters:

const { mutate } = userClientHooks.useMutation(
    "post",
    "/subscriptions/:subscriptionId/seats/:seatId/request",
    {
       subscriptionId: <your subscription id>,
       seatId: <your seat id>
    },
    {
      onSuccess: () => invalidate(),
    }
  );

[ecyrbe]

for your middleware, remember that zodios is just express with types, so this should work :

app.use( async (req, _, next) => {
   req.repo = createSqliteRepository({
     database: sqlite,
     onCreateConnection: async () => console.log("connected to database"),
   });

   return next(); // do not pass any argument to next, else it will be transformed to an error 500
});

[nadilas]

For the third point, it's actually normal. before zodios failed to tell your you forgot to pass parameters.

to fix, just pass the required parameters:

const { mutate } = userClientHooks.useMutation(
    "post",
    "/subscriptions/:subscriptionId/seats/:seatId/request",
    {
       subscriptionId: <your subscription id>,
       seatId: <your seat id>
    },
    {
      onSuccess: () => invalidate(),
    }
  );

Alright, that makes sense 👍

[nadilas]

for your middleware, remember that zodios is just express with types, so this should work :

app.use( async (req, _, next) => {
   req.repo = createSqliteRepository({
     database: sqlite,
     onCreateConnection: async () => console.log("connected to database"),
   });

   return next(); // do not pass any argument to next, else it will be transformed to an error 500
});

I'll try this right away. I was messing up no the not providing params to next. I was thinking in trpc contexts, that's why I wanted to outsmart typescript.

[ecyrbe]

For the first, there seems to be something wrong with how i packaged @zodios/express. In the mean time, you should revert to @zodios/express 1.0.5. I'll try to come with a patch as fast as i can.

[nadilas]

Thanks, reverted.

There's also a weird one after the update and adding another route: https://github.com/dotindustries/bouncer/blob/b24f8356fd8b32bec5032f4363efbdeb44ceb8f9/apps/api/pages/index.tsx#L24

api:dev: Error: No QueryClient set, use QueryClientProvider to set one
api:dev:     at useQueryClient (file:///Users/nadilas/workspace/dot-inc/bouncer/node_modules/.pnpm/@tanstack+react-query@4.13.0_biqbaboplfbrettd7655fr4n2y/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:34:11)

[ecyrbe]

Can you remove the workaround in your nextjs.config.mjs ? i think it should work without it.

[ecyrbe]

it should look like this :

// import ntm from "next-transpile-modules";
import { createRequire } from "module";

const require = createRequire(import.meta.url);
// const withTM = ntm(["@dotinc/bouncer-core"]);

/**
 * Don't be scared of the generics here.
 * All they do is to give us autocompletion when using this.
 *
 * @template {import('next').NextConfig} T
 * @param {T} config - A generic parameter that flows through to the return type
 * @constraint {{import('next').NextConfig}}
 */
function defineNextConfig(config) {
  return config;
}

export default // withTM(
defineNextConfig({
  reactStrictMode: true,
  swcMinify: true,
});

[nadilas]

Yep, that solved it. 🎉 My reference was: https://github.com/ecyrbe/zodios-express/blob/main/examples/next/next.config.js

[ecyrbe]

Yes, i just updated the example to new version as suggested. This was a workaround, no more valid. sorry for that. Also i fixed packaging on @zodios/express 10.3.2.

I tested the packaging on the example. it's ok now. sorry for the inconvenience.

[nadilas]

No worries, no harm done. And thanks for being so engaged.

• @zodios/express@10.3.2 is working nicely - async issue is gone. ✅
• middleware is also working as expected ✅

[ecyrbe]

also, one litle trick. if you want to enfocre a string on a path parameter you can, this way you'll be able to get rid of the custom validation you added:

{
    method: "post",
    alias: "publisherConfiguration",
    path: "/publisher/:publisherId/configuration",
    parameters: [
      {
        name: "publisherId",
        schema: z.string().regex(/<your regexp>/),
        type: "Path",
      },
      {
        name: "publisherConfiguration",
        schema: publisherConfiguration,
        type: "Body",
      },
    ],
    response: publisherConfiguration,
  },

[nadilas]

Thanks for the hint. I knew about the path param definition, but I actually found it nice that the path params were picked up without explicit definitions. I am somewhat annoyed by the string | number type, but I get why it's the default.