venus
venus
Explore posts from servers
RReactifluxTtRPCTTCTheo's Typesafe Cult
PostsComments
TTCTheo's Typesafe Cult
Created by venus on 4/13/2023 in #questions
What database/service to use to store chart breakpoints.
Hey, I would like to store chart breakpoints in large amount. (aprox 5M+ breakpoints). What database/service would you recommend me to use? Afaik MongoDB has kind of structure similar to my issue.
1 replies
TTCTheo's Typesafe Cult
Created by venus on 2/27/2023 in #questions
Dynamic subdomains
Hi, I would like to setup custom subdomain to act like a slug, something like: [slug].mysite.com. I thought of using nginx that reverse proxy that will swap the subdomain to the slug in the background. So something like this: subdomain.mysite.com/hello -> mysite.com/subdomain/hello. Do you know any better method to achieve the same result?
20 replies
TTCTheo's Typesafe Cult
Created by venus on 1/31/2023 in #questions
Docker & Nginx - ports
Hi, I am running Docker containers on my VPS and I'd like to deploy there an API with Nginx config. Nginx uses by default ports 80 and 443, but those ports are already taken by Nginx which is running in non docker environment. Can I run another nginx (in docker) on this VPS if those ports are taken?
1 replies
TTCTheo's Typesafe Cult
Created by venus on 1/29/2023 in #questions
Override ENV variables inside Docker Compose
Hey, I have those ENV variables for my docker compose config. There's one problem, inside docker I have to specific DB_HOST {container_name}, so I've tried to override it. 
DB_HOST=localhost
DB_USER=
DB_PASSWORD=
DB_NAME=
DB_PORT=

DATABASE_URL=mysql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME}
DB_HOST=localhost
DB_USER=
DB_PASSWORD=
DB_NAME=
DB_PORT=

DATABASE_URL=mysql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME}
env_file:
  - .env
environment:
  DB_HOST: mysql # Rewrite the `localhost` host, but this won't override the `DATABASE_URL` ENV
env_file:
  - .env
environment:
  DB_HOST: mysql # Rewrite the `localhost` host, but this won't override the `DATABASE_URL` ENV
2 replies
TTCTheo's Typesafe Cult
Created by venus on 1/26/2023 in #questions
ZSH Extension?
3 replies
TTCTheo's Typesafe Cult
Created by venus on 1/24/2023 in #questions
React immutability performance
Hi! Is it possible to avoid calling renderPosts every time when filteredPosts gets mutated? filteredPosts is mutated because state search value changes, but actually the value of filteredPosts (array of objects) did not (in case the search expression is not too specific) Can I handle this mutability in React? 
const filteredPosts = useMemo(() => {
  return posts.filter(
    (post) => post.title.includes(search) || post.excerpt?.includes(search)
  );
}, [posts, search]);

const renderPosts = useCallback(() => {
  console.log('renderPosts');

  // return filteredPosts.map ...
}, [filteredPosts]);
const filteredPosts = useMemo(() => {
  return posts.filter(
    (post) => post.title.includes(search) || post.excerpt?.includes(search)
  );
}, [posts, search]);

const renderPosts = useCallback(() => {
  console.log('renderPosts');

  // return filteredPosts.map ...
}, [filteredPosts]);
4 replies
TTCTheo's Typesafe Cult
Created by venus on 12/25/2022 in #questions
Strategy to test components in React
Hey, I am new into testing and I haven't test anything much before. I am still getting stuck about theory what should I test and what shouldn't. For example here. I have component Heading that takes prop level which is number between 1 and 6. Is this test useless? And if so, what test would you write for this specific component? 
const levels = [1, 2, 3, 4, 5, 6] as const;

it.each(levels)('should rener heading level %s', (level: HeadingLevel) => {
  render(<Heading level={level}>Heading {level}</Heading>);

  expect(screen.getByRole('heading', { level })).toBeInTheDocument();
});
const levels = [1, 2, 3, 4, 5, 6] as const;

it.each(levels)('should rener heading level %s', (level: HeadingLevel) => {
  render(<Heading level={level}>Heading {level}</Heading>);

  expect(screen.getByRole('heading', { level })).toBeInTheDocument();
});
8 replies
TTCTheo's Typesafe Cult
Created by venus on 12/14/2022 in #questions
Which drag and drop lib would you recommend me these days?
Hey! I saw a lot of discussions about D&D libraries, that some of them are depreciated, but still used. So that's why I'm asking which one would you recommend me?
19 replies
TTCTheo's Typesafe Cult
Created by venus on 11/23/2022 in #questions
GitLab refer to specific code in repo via code snippet
1 replies
TTCTheo's Typesafe Cult
Created by venus on 10/27/2022 in #questions
Best practice how to store settings in MySQL?
Hi. I would like to store some settings / preferences in the database, but don't know what's the common structure, to do so. Would it be something like so? 
model DashboardSettings {
    name  String @unique
    value String
}
model DashboardSettings {
    name  String @unique
    value String
}
name                |   value
-----------------------------
DISCORD_GUILD_ID    |   63meEMh385emhm
name                |   value
-----------------------------
DISCORD_GUILD_ID    |   63meEMh385emhm
49 replies
TTCTheo's Typesafe Cult
Created by venus on 10/15/2022 in #questions
Stripe - can I use tRPC for Stripe's webhook?
I'm building a Strip checkout and I am wondering if it is possible to use tRPC endpoint for handling Stripe's webook. I have one more question regarding to Strapi, how can I verify what custom has paid for the product? (I am using T3 stack)
26 replies
TTCTheo's Typesafe Cult
Created by venus on 10/12/2022 in #questions
What calendar software do you use? (Windows, MacOS, iOS)
Hey! I want to start scheduling my day, so I started looking for some calendar software/app that has good compatibility across all devices. Which one would you recommend me to use based on your satisfaction?
6 replies
TTCTheo's Typesafe Cult
Created by venus on 10/9/2022 in #questions
Zod - sort schema
Hi. I am adding sort option to prisma findMany query. Since I don't know zod very well, I could not think of any possible type-safe solution. Sort format should be: columnFieldName:orderType, so for example: firstName:desc. I made my types from @prisma/client, but don't know how to add them to tRPC input. Is it even possible? 
type ColumnField = keyof Astronaut;
type Order = "desc" | "asc";

getAll: t.procedure
  .input(z.object({ sort: z.string().optional() }))
  .query(({ ctx, input }) => {
    const [col, order] = input.sort?.split(":") as any;

    return ctx.prisma.astronaut.findMany({
      orderBy: {
        [col]: order,
      },
    });
  })
type ColumnField = keyof Astronaut;
type Order = "desc" | "asc";

getAll: t.procedure
  .input(z.object({ sort: z.string().optional() }))
  .query(({ ctx, input }) => {
    const [col, order] = input.sort?.split(":") as any;

    return ctx.prisma.astronaut.findMany({
      orderBy: {
        [col]: order,
      },
    });
  })
8 replies
TTCTheo's Typesafe Cult
Created by venus on 10/8/2022 in #questions
React Query - Update data after successful mutation
Using vanilla react query I was used to use one of these options. What are the options with tRPC? Since queryClient doesn't provide any of these methods. const queryClient = trpc.useContext(); 
// Normal React Query
queryClient.setQueryData(['posts', id], newPost)
queryClient.invalidateQueries(['posts', id, 'comments'])
// Normal React Query
queryClient.setQueryData(['posts', id], newPost)
queryClient.invalidateQueries(['posts', id, 'comments'])
4 replies
TTCTheo's Typesafe Cult
Created by venus on 10/2/2022 in #questions
Next.js - ReactQuery data is being refetched everytime route changes.
Hello. I made this simple demo, where react query forces refetch every time route changes, I want to disable this behavior. Is it possible? It does refetch only when previous response has been unsuccessful. In my specific example where I am getting user from API, I don't really want this kind of behavior, because it shows loading animation on every page change. My default query client options: 
defaultOptions: {
  queries: {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  }
}
defaultOptions: {
  queries: {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  }
}
const { data: me, isLoading } = useQuery(
  ["getUser"],
  () => fetch("https://api.com/api/me").then((res) => res.json()),
  {
    retry: 0,
    staleTime: 1000 * 60 * 60 * 8
  }
);
const { data: me, isLoading } = useQuery(
  ["getUser"],
  () => fetch("https://api.com/api/me").then((res) => res.json()),
  {
    retry: 0,
    staleTime: 1000 * 60 * 60 * 8
  }
);
Demo: https://codesandbox.io/s/silly-ptolemy-x0e0ih?file=/components/Nav.tsx
1 replies
TTCTheo's Typesafe Cult
Created by venus on 9/25/2022 in #questions
tRPC, ssr specific route
Hello. I'm migrating to tRPC and I ran into this specific issue. In this scenario I prefetch data on server using getServerSideProps and then pass them to initialData inside useQuery. I use it for SEO purposes. What can I do when I'm using tRPC, I'm unable to do the fetch on server using useQuery. I know there's option ssr: true, but I don't want to all routes to run on SSR just because of this one specific case. Thanks. 
const { data: track } = useQuery(
  ['track', router.query.id],
  ({ signal }) =>
    axios
      .get(`/api/spotify/track/${String(router.query.id)}`, { signal })
      .then((res) => res.data),
  { enabled: !!router.query.id, initialData }
);

export const getServerSideProps: GetServerSideProps = async (context) => {
  context.res.setHeader(
    'Cache-Control',
    'public, s-maxage=86400, stale-while-revalidate=86400'
  );

  return axios
    .get(`${getBaseUrl()}/api/spotify/track/${context.query.id}`)
    .then(({ data }) => ({ props: { initialData: data } }));
};
const { data: track } = useQuery(
  ['track', router.query.id],
  ({ signal }) =>
    axios
      .get(`/api/spotify/track/${String(router.query.id)}`, { signal })
      .then((res) => res.data),
  { enabled: !!router.query.id, initialData }
);

export const getServerSideProps: GetServerSideProps = async (context) => {
  context.res.setHeader(
    'Cache-Control',
    'public, s-maxage=86400, stale-while-revalidate=86400'
  );

  return axios
    .get(`${getBaseUrl()}/api/spotify/track/${context.query.id}`)
    .then(({ data }) => ({ props: { initialData: data } }));
};
36 replies
TTCTheo's Typesafe Cult
Created by venus on 9/25/2022 in #questions
T3Stack 'react-query' not found
Hey, I'm trying to migrate to t3 stack, but I've been using react-query, but I am getting this error: 
./node_modules/@trpc/next/dist/trpc-next.esm.js:8:0
Module not found: Can't resolve 'react-query'
./node_modules/@trpc/next/dist/trpc-next.esm.js:8:0
Module not found: Can't resolve 'react-query'
// pages/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

export default withTRPC<AppRouter>({
  config({ ctx }) {
    const url = `${getBaseUrl()}/api/trpc`;

    return {
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === 'development' ||
            (opts.direction === 'down' && opts.result instanceof Error)
        }),
        httpBatchLink({ url })
      ],
      url,
      transformer: superjson,
      queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } }
    };
  },

  ssr: false
})(MyApp);
// pages/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

export default withTRPC<AppRouter>({
  config({ ctx }) {
    const url = `${getBaseUrl()}/api/trpc`;

    return {
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === 'development' ||
            (opts.direction === 'down' && opts.result instanceof Error)
        }),
        httpBatchLink({ url })
      ],
      url,
      transformer: superjson,
      queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } }
    };
  },

  ssr: false
})(MyApp);
48 replies
RReactiflux
Created by venus on 9/11/2022 in #react-forum
Is it possible to avoid prop drilling in this scenario?
Hello, is it possible to reset the input text from top level component Main other way than just prop drilling input text state from Main component? 
const Main = () => {
  return (
    <>
      <button onClick={() => {}}>Reset Input</button>
      <SearchInput onValueChange={(v) => {}} />
    </>
  );
};

export const SearchInput = ({ onValueChange }) => {
  const [text, setText] = useState('');
  const [value] = useDebounce(text, 300);

  useEffect(() => onValueChange(value), [value]);

  return (
    <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
  );
};
const Main = () => {
  return (
    <>
      <button onClick={() => {}}>Reset Input</button>
      <SearchInput onValueChange={(v) => {}} />
    </>
  );
};

export const SearchInput = ({ onValueChange }) => {
  const [text, setText] = useState('');
  const [value] = useDebounce(text, 300);

  useEffect(() => onValueChange(value), [value]);

  return (
    <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
  );
};
5 replies