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'
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
I dont understand this behavior, can someone please explain me what is going on ? In my login page i have
so it's not cache
'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
