Xata•4w ago

Error: Option apiKey is required in Remix loader

Hello, I've been trying to query from Xata in a Remix loader, and am getting this error.

Error: Option apiKey is required
    at XataClient.parseOptions_fn

Error: Option apiKey is required
    at XataClient.parseOptions_fn

I'm aware that queries should only be run on the server, but from what I understand, Remix loaders only run on the server, so I don't think that's the issue.

export async function loader() {
  const xata = getXataClient()
  const topics = await xata.db.topics.getAll()
  return json({ topics })
}

export async function loader() {
  const xata = getXataClient()
  const topics = await xata.db.topics.getAll()
  return json({ topics })
}

I found a workaround, which is to manually add apiKey and branch to the XataClient instance that is generated by the CLI.

export const getXataClient = () => {
  if (instance) return instance

  // change this
  instance = new XataClient()
  // to this
  instance = new XataClient({
    apiKey: process.env.XATA_API_KEY,
    branch: process.env.XATA_BRANCH,
  })

  return instance
}

export const getXataClient = () => {
  if (instance) return instance

  // change this
  instance = new XataClient()
  // to this
  instance = new XataClient({
    apiKey: process.env.XATA_API_KEY,
    branch: process.env.XATA_BRANCH,
  })

  return instance
}

But that means I have to manually do that every time I update the schema. Is there something obvious I'm missing? Thanks!

Securely querying your database with Xata

Connect to a Xata database and fetch data from client-side apps without exposing security keys.

2 Replies

cmck•4w ago

Hi there, thanks for reaching out, let me take a look and see if there's a better solution. So, I was able to query in a remix loader without passing my api key and after following this tutorial . You could try following this guide from scratch and see if you can get it to work without adding the apiKey etc.

export const meta: MetaFunction = () => {
  return [
    { title: 'Xata and Remix' },
    { name: "description", content: "Welcome to Xata!" },
  ];
};

export async function loader() {
  const xata = getXataClient();
  const posts = await xata.db.Posts.getAll();
  return json({
    posts
  });
}

export const meta: MetaFunction = () => {
  return [
    { title: 'Xata and Remix' },
    { name: "description", content: "Welcome to Xata!" },
  ];
};

export async function loader() {
  const xata = getXataClient();
  const posts = await xata.db.Posts.getAll();
  return json({
    posts
  });
}

I'd also recommend running the xata status and xata auth status commands in your project directory to check if the api key can be loaded.

johncmacy•4w ago

ok, thanks for the reply - I was following that tutorial, but something must have gotten mixed up with the API keys

Gaming

Programming

Error: Option apiKey is required in Remix loader