TheSadMidDeveloper Posts - Answer Overflow

TheSadMidDeveloper

Explore posts from servers

•Created by TheSadMidDeveloper on 10/11/2024 in #❓・help

Server middleware ordering with modules

I think this message by @BracketJohn was ignored by @pi0 and @danielroe and other Nuxt core team mebers a lot of times - https://discord.com/channels/473401852243869706/473406169306890240/1046427324691787877 There are plenty of cases where you're authoring a module and installing a server middleware that attaches a context so that userland can access it as well when they have their own custom middleware - but this isnt the case. The custom middlewares you put inside server/middlewares will run first before the middleware added by modules. Before anyone answers "just add a number to your custom middleware so it runs last", no it does not work. It only works on the middlewares you put inside server/middlewares but not middlewares installed by modules. Is this something that will be tackled in the future? If not, is there a way to make sure middlewares added by modules (addServerMiddleware) will run first? Thank you so much!

8 replies

DDeno

•Created by TheSadMidDeveloper on 10/6/2024 in #help

Add provider component to context

Hi, is this an anti-pattern in Fresh?

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

Basically SomeProvider is attached to the ctx via middleware. Use-case is if you want to add server props coming from state. So instead of doing something like:

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

It improves DX since user-land wont have to do this anymore. Will it be unique to each request? And if yes, how would you update PageProps type?

8 replies

DDeno

•Created by TheSadMidDeveloper on 10/1/2024 in #help

Redirecting inside a page in Fresh 2.0

Is returning a redirect response like this not working in Fresh 2.0 anymore?

import { define } from '../utils.ts';

export default define.page(function Page({ state }) {
  if (!state.isLoggedIn) {
    return new Response('', {
      status: 307,
      headers: { Location: '/sign-in' },
    });
  }

  return (
    <div style={{ display: 'flex' }}>
      I am logged in
    </div>
  );
});

import { define } from '../utils.ts';

export default define.page(function Page({ state }) {
  if (!state.isLoggedIn) {
    return new Response('', {
      status: 307,
      headers: { Location: '/sign-in' },
    });
  }

  return (
    <div style={{ display: 'flex' }}>
      I am logged in
    </div>
  );
});

Also, ctx.redirect is undefined so it's likely not implemented yet I believe?

3 replies

DDeno

•Created by TheSadMidDeveloper on 9/30/2024 in #help

How to load islands in Fresh 2.0 plugins?

Im doing this one but looks like it's not working

import * as allIslands from './islands/mod.ts' // named export components

export function somePlugin<T>(
  app: App<T>,
  options: SomeOptions = {}
) {
  app.use(someMiddleware(options))

  const islandsUrl = new URL('./islands/mod.ts', import.meta.url);
  for (const key of Object.keys(allIslands)) {
    app.island(islandsUrl, key, allIslands[key])
  }
}

import * as allIslands from './islands/mod.ts' // named export components

export function somePlugin<T>(
  app: App<T>,
  options: SomeOptions = {}
) {
  app.use(someMiddleware(options))

  const islandsUrl = new URL('./islands/mod.ts', import.meta.url);
  for (const key of Object.keys(allIslands)) {
    app.island(islandsUrl, key, allIslands[key])
  }
}

15 replies

TtRPC

•Created by TheSadMidDeveloper on 8/10/2024 in #❓-help

Guides on authoring own client like `@trpc/react`

Hello, are there plans or guides to create own client useQuery in @trpc/react? I'm asking this because I plan to create something for Svelte + Tanstack Svelte Query but looking at the source code for v11, the types are scattered all around and i cannot seem to follow. Also, there is 1. createRecursiveProxy 2. createTRPCClientProxy 3. createTRPCFlatProxy and many others which is sooo confusing Any help would be much appreciated

1 replies

Gaming

Programming