Passing types along from Hono to Next

We are exploring using Hono as a BFF for our next.js app, which works well in our monorepo, however the types generated on the Hono server are not being passed over the wire to next.js. Can anyone point me in the right direction of what to explore.

hono server which has data typed correctly.

app.get('/:siteSlug/get-products-by-market', async (c) => {
  const siteSlug = c.req.param('siteSlug');

  const { data, success } = await getProductsByMarket({
    siteSlug,
  });

  if (success) {
    return c.json({ data, success });
  }
});

app.get('/:siteSlug/get-products-by-market', async (c) => {
  const siteSlug = c.req.param('siteSlug');

  const { data, success } = await getProductsByMarket({
    siteSlug,
  });

  if (success) {
    return c.json({ data, success });
  }
});

function to fetch the data

export async function fetchFromBFF<T>({
  action,
  siteSlug,
}: FetchFromBFF): Promise<T> {
  try {
    const response = await fetch(
      `http://localhost:1234/api/${siteSlug}/${action}`,
    );
    const result = response.json();
    return result as T;
  } catch (error) {
    console.log(error);
    throw Error;
  }
}

export async function fetchFromBFF<T>({
  action,
  siteSlug,
}: FetchFromBFF): Promise<T> {
  try {
    const response = await fetch(
      `http://localhost:1234/api/${siteSlug}/${action}`,
    );
    const result = response.json();
    return result as T;
  } catch (error) {
    console.log(error);
    throw Error;
  }
}

consuming the data in next.js with the data coming as untyped (Property 'data' does not exist on type 'unknown'.)

const {
    data: productsByMarketData,
    success,
  } = await fetchFromBFF({
    action: 'get-products-by-market',
    siteSlug,
  });

const {
    data: productsByMarketData,
    success,
  } = await fetchFromBFF({
    action: 'get-products-by-market',
    siteSlug,
  });

Hono•10mo ago•

10 replies

REIW

Passing types along from Hono to Next

app.get('/:siteSlug/get-products-by-market', async (c) => {
  const siteSlug = c.req.param('siteSlug');

  const { data, success } = await getProductsByMarket({
    siteSlug,
  });

  if (success) {
    return c.json({ data, success });
  }
});

app.get('/:siteSlug/get-products-by-market', async (c) => {
  const siteSlug = c.req.param('siteSlug');

  const { data, success } = await getProductsByMarket({
    siteSlug,
  });

  if (success) {
    return c.json({ data, success });
  }
});

function to fetch the data

export async function fetchFromBFF<T>({
  action,
  siteSlug,
}: FetchFromBFF): Promise<T> {
  try {
    const response = await fetch(
      `http://localhost:1234/api/${siteSlug}/${action}`,
    );
    const result = response.json();
    return result as T;
  } catch (error) {
    console.log(error);
    throw Error;
  }
}

export async function fetchFromBFF<T>({
  action,
  siteSlug,
}: FetchFromBFF): Promise<T> {
  try {
    const response = await fetch(
      `http://localhost:1234/api/${siteSlug}/${action}`,
    );
    const result = response.json();
    return result as T;
  } catch (error) {
    console.log(error);
    throw Error;
  }
}

consuming the data in next.js with the data coming as untyped (Property 'data' does not exist on type 'unknown'.)

const {
    data: productsByMarketData,
    success,
  } = await fetchFromBFF({
    action: 'get-products-by-market',
    siteSlug,
  });

const {
    data: productsByMarketData,
    success,
  } = await fetchFromBFF({
    action: 'get-products-by-market',
    siteSlug,
  });

Passing types along from Hono to Next

Similar Threads

Passing types along from Hono to Next

Similar Threads

Similar Threads

Similar Threads