seven•8mo ago

Calling procedures from Next server actions

Hi, is using trpc client allowed in server actions? I have two use cases, in one i call procedure from server component with the 'use server'

'use server';

export async function getCandlesticsData(symbol: string, interval: KlineInterval) {
  const candlesticksPromise = client.binance.candlestick.query({ symbol, interval }, { context: { revalidate: 0 } });
  const lastTradePromise = client.binance.lastTrade.query({ symbol }, { context: { revalidate: 0 } });
  const [candlesticksResult, recentTrade] = await Promise.all([candlesticksPromise, lastTradePromise]);

  return {
    candlesticks: candlesticksResult?.candlesticks ?? [],
    recentTrade: parseFloat(recentTrade ?? '0'),
  };
}

export async function TradingChartsManager({ symbol }: D3ChartProps) {
  const { candlesticks, recentTrade } = await getCandlesticsData(symbol, interval);

  return (
    <section className={styles.container}>
      <IntervalButtons />
      <CandlestickChart {...{ symbol, interval, candlesticks, recentTrade }} key={`${symbol}-${interval}`} />;
    </section>
  );
}

'use server';

export async function getCandlesticsData(symbol: string, interval: KlineInterval) {
  const candlesticksPromise = client.binance.candlestick.query({ symbol, interval }, { context: { revalidate: 0 } });
  const lastTradePromise = client.binance.lastTrade.query({ symbol }, { context: { revalidate: 0 } });
  const [candlesticksResult, recentTrade] = await Promise.all([candlesticksPromise, lastTradePromise]);

  return {
    candlesticks: candlesticksResult?.candlesticks ?? [],
    recentTrade: parseFloat(recentTrade ?? '0'),
  };
}

export async function TradingChartsManager({ symbol }: D3ChartProps) {
  const { candlesticks, recentTrade } = await getCandlesticsData(symbol, interval);

  return (
    <section className={styles.container}>
      <IntervalButtons />
      <CandlestickChart {...{ symbol, interval, candlesticks, recentTrade }} key={`${symbol}-${interval}`} />;
    </section>
  );
}

and it works well every time and in my login action the prcedure is never called unless i remove 'use server' from the top of the file

'use server';

export async function loginAction<State extends FormState, Payload extends FormData>(
  _: State,
  payload: Payload,
): Promise<FormState> {
  const parsedData = await LoginFormSchema.safeParseAsync(Object.fromEntries(payload));
  if (!parsedData.success) {
    return {
      success: false,
      errors: parsedData.error.flatten().fieldErrors,
    };
  }

    await client.auth.login.mutate({ email: parsedData.data.email, password: parsedData.data.password });

  return { success: true, data: parsedData.data };
}

'use server';

export async function loginAction<State extends FormState, Payload extends FormData>(
  _: State,
  payload: Payload,
): Promise<FormState> {
  const parsedData = await LoginFormSchema.safeParseAsync(Object.fromEntries(payload));
  if (!parsedData.success) {
    return {
      success: false,
      errors: parsedData.error.flatten().fieldErrors,
    };
  }

    await client.auth.login.mutate({ email: parsedData.data.email, password: parsedData.data.password });

  return { success: true, data: parsedData.data };
}

I dont understand this behavior, can someone please explain me what is going on ? In my login page i have

export const dynamic = 'force-dynamic';

export const dynamic = 'force-dynamic';

so it's not cache

0 Replies

No replies yetBe the first to reply to this messageJoin