Sqlite Database Added to blitz build

[hariria]

I have a completely static website with a lot of JSON data. Because the JSON data is complex, I wanted to process and add to a sqlite database that I could then access from my react pages using Prisma's ORM. This works perfectly when I'm running blitz start in development mode, but when I build the blitz project using blitz build I don't think the sqlite database is being added into the build folder. Does anyone know how I could work around this?

• I'm only using the sqlite database as a READ-ONLY data source so no need to be worried about ephemerality
• I'm using Vercel's default deployment options which runs blitz build

[hariria]

@flybayer do you know if this might be possible?

[flybayer]

How are you importing/opening the db?

Vercel deploy works like this:

1. blitz build compiles everything to .next
2. Vercel analyzes your source code and only copies used files to the production build bundle

So it sounds like (2) could be the issue, I don't think this is a Blitz build issue. If you need, you could do a minimal repo with plain next.js and see if you still have the issue there.

That said, here's a workaround that should work for (2). Add this to your code somewhere:

import path from 'path'
path.resolve("../path/to/db.sqlite")

[hariria]

@flybayer I'm using the standard setup that comes with blitz boilerplate and I'm reading the database via prisma as shown below.

hmm I tried adding path.resolve("../path/to/db.sqlite") in both my index.tsx and queries and index.ts but haven't had any luck. Do you know if theres another way we could potentially solve this. I'd greatly appreciate your help

[flybayer]

Hmm, I've confirmed with Vercel that this should work. Is the repo open? Of if not, could you share the code with me & vercel to troubleshoot?

For another approach, did you consider using getStaticProps and getStaticPaths since the data is all static? Doing that would read from the db at build time and then runtime won't need it. This will also give you much better performance since the pages will be static.

[flybayer]

Update, looks like you have to do this:

import path from 'path'
path.resolve(process.cwd(), "../path/to/db.sqlite")

[hariria]

@flybayer i tried using useQuery in getStaticProps but since thats a function and not a component, React complains about using hooks in a function and not a component. My code is below:

// This function gets called during pre-rendering
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export async function getStaticProps() {
  const category = useQuery(getCategoryPage, { where: { categoryCode: 'hello_world' } });
  return {
    props: {
      category,
    },
  };
}

Home.getLayout = (page) => (
  <Suspense fallback={<FallbackUI />}>
    <Layout title="Home">{page}</Layout>
  </Suspense>
);

export default Home;

The query works fine when I put it in my component. I'm just struggling to figure out how to call useQuery for my static props.

I looked at the blitz.js documentation and in the getStaticProps section it states that you can use a blitz query, however, I haven't been able to successfully implement that. is there a different approach I should take?

[hariria]

nevermind i figured it out! Thanks! If anyone else is having trouble, take a look at look at the queryUsage documentation on blitz.js. Also my code is attached below:

export const getStaticProps = async (context) => {
  const category = await getCategoryPage({ where: { categoryCode: 'hello_world' } }, context);
  // console.log(category);
  return {
    props: {
      category,
    },
  };
};

Home.getLayout = (page) => (
  <Suspense fallback={<FallbackUI />}>
    <Layout title="Home">{page}</Layout>
  </Suspense>
);

export default Home;

I think the type for GetStaticProps, ie.

import { BlitzPage, GetStaticProps, useQuery } from 'blitz';

may have to be changed in the future to accomodate use cases where the user wants to call a query and pass context within getStaticProps. Right now if I do

export const getStaticProps: GetStaticProps = async (context) => {
  const category = await getCategoryPage({ where: { categoryCode: 'hello_world' } }, context);
  // console.log(category);
  return {
    props: {
      category,
    },
  };
};

my linter complains about the context object passed into the getCategoryPage method with the message

Argument of type 'GetStaticPropsContext' is not assignable to parameter of type 'Ctx'.
Property 'session' is missing in type 'GetStaticPropsContext' but required in type 'Ctx'.