lelabo Posts - Answer Overflow

lelabo

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult DTDrizzle Team

•Created by lelabo on 7/26/2024 in #questions

Handling Third-party lib client component that relies on ENV vars.

Hi, I am currently trying to add search on my project, and I stubbled upon a common scenario that I don't know how to handle yet... I am trying to use Meilisearch with react-instantsearch library. I have this snippet of code, from the doc:

"use client";

import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
import { InfiniteHits, InstantSearch, SearchBox } from "react-instantsearch";
import { env } from "~/env";

export const { searchClient } = instantMeiliSearch(
  env.NEXT_PUBLIC_SEARCH_API_URL,
  env.NEXT_PUBLIC_SEARCH_API_KEY,
);

export default function InstantSearchComponent() {

  return (
    // @ts-ignore
    <InstantSearch indexName="steam-videogames" searchClient={searchClient}>
      {/* @ts-ignore */}
      <SearchBox />
      {/* @ts-ignore */}
      <InfiniteHits hitComponent={Hit} />
    </InstantSearch>
  );
}

function Hit({
  hit,
}: {
  hit: {
    id: string;
    image: string;
    name: string;
    description: string;
  };
}) {
  return (
    <article key={hit.id}>
      <img src={hit.image} alt={hit.name} />
      <h1>{hit.name}</h1>
      <p>${hit.description}</p>
    </article>
  );
}

"use client";

import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
import { InfiniteHits, InstantSearch, SearchBox } from "react-instantsearch";
import { env } from "~/env";

export const { searchClient } = instantMeiliSearch(
  env.NEXT_PUBLIC_SEARCH_API_URL,
  env.NEXT_PUBLIC_SEARCH_API_KEY,
);

export default function InstantSearchComponent() {

  return (
    // @ts-ignore
    <InstantSearch indexName="steam-videogames" searchClient={searchClient}>
      {/* @ts-ignore */}
      <SearchBox />
      {/* @ts-ignore */}
      <InfiniteHits hitComponent={Hit} />
    </InstantSearch>
  );
}

function Hit({
  hit,
}: {
  hit: {
    id: string;
    image: string;
    name: string;
    description: string;
  };
}) {
  return (
    <article key={hit.id}>
      <img src={hit.image} alt={hit.name} />
      <h1>{hit.name}</h1>
      <p>${hit.description}</p>
    </article>
  );
}

- I could do this... but I prefer avoiding sensitive keys on client if possible. - I can create the searchClient props on the server, but I can't pass it to a client component. - I can't use the InstantSearch component server-side. How am I supposed to handle this type of Third-party problems where I have to create things client-side that depends upon sensitive keys?

24 replies

TTCTheo's Typesafe Cult

•Created by lelabo on 1/2/2024 in #questions

How to make scripts in a t3-stack app (with tsx and t3-env)?

I am trying to create a scripts folder to run things along my website and create tools, test things and all. I tried tsx with success, until I needed the env to be available (thus involving t3-env). I am currently trying to do a small script to test inserting things in my database:

import { db } from "~/server/db";
import { food } from "~/server/db/schema";

await db.insert(food).values({
  name: "Banana",
});

import { db } from "~/server/db";
import { food } from "~/server/db/schema";

await db.insert(food).values({
  name: "Banana",
});

Until now, I did scripts that did not involve resources from the app but right now I would like to connect to my database but I get this error:

:x: Invalid environment variables: {
  DATABASE_URL: [ 'Required' ],
  DATABASE_HOST: [ 'Required' ],
  DATABASE_USERNAME: [ 'Required' ],
  DATABASE_PASSWORD: [ 'Required' ],
}
.../node_modules/.pnpm/@[email protected]_ophst5sms6obxk2veobtcst52a/node_modules/@t3-oss/core/index.ts:217
      throw new Error("Invalid environment variables");

:x: Invalid environment variables: {
  DATABASE_URL: [ 'Required' ],
  DATABASE_HOST: [ 'Required' ],
  DATABASE_USERNAME: [ 'Required' ],
  DATABASE_PASSWORD: [ 'Required' ],
}
.../node_modules/.pnpm/@[email protected]_ophst5sms6obxk2veobtcst52a/node_modules/@t3-oss/core/index.ts:217
      throw new Error("Invalid environment variables");

4 replies

TTCTheo's Typesafe Cult

•Created by lelabo on 9/26/2022 in #questions

I need ideas for Data viz & Metrics framework in t3 stack ?

Hi, I created my app with the T3 stack (Prisma, next-auth, tRPC, Planetscale) and added axiom for logging and monitoring. It feels like I am missing something for data visualization... This stack allowed me to implement so much by letting great libs and services do all the heavy lifting. Right now, I would like the following : - a dashboard with the most critical metrics. - (maybe) a dashboard with curated data monitoring (to avoid getting in axiom every time). Before jumping into the code, I would like to know what and how others are doing regarding data viz... - Should I use another service like retool (any alternative ? I haven't found many)? - Best libraries? (For table, I am thinking about TanStack Table, but for graphs ?) - Recommendation and pitfalls?

7 replies

Gaming

Programming