antoine
antoine
PostsComments
TTCTheo's Typesafe Cult
Created by antoine on 4/17/2024 in #questions
pnpm/turbo workspace issue
I have the following workspace setup: 
packages:
  - apps/*
  - packages/*
  - packages/api/*
  - tooling/*
packages:
  - apps/*
  - packages/*
  - packages/api/*
  - tooling/*
I get a warning that the api folder itself doesn't have a package.json when running pnpm commands, so I added "!packages/api" to that list, which fixed the issue (pnpm commands work fine for packages in the api folder), but turbo-ignore doesn't seem to find the packages in the api folder with that addition when running the turbo build dry-run command. Anyone know how I can work around this?
2 replies
TTCTheo's Typesafe Cult
Created by antoine on 3/18/2024 in #questions
undefined `direction` for useInfiniteQuery
I got my input schema from https://trpc.io/docs/client/react/useInfiniteQuery, and fetchNextPage / fetchPreviousPage both show undefined for direction when called, but I'm expecting "forward" or "backward" from https://tanstack.com/query/latest/docs/framework/react/guides/query-functions#queryfunctioncontext. I'm using tRPC v11 and react table v8 to implement pagination. I'm not sure if I'm misunderstanding something here, but for now I'll define direction with useState separately. Here's how I'm using infinite queries (the Button is in a different file): 
  const {
    data: discountCodes,
    isFetchingNextPage,
    isFetchingPreviousPage,
    isFetching,
    hasNextPage,
    hasPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
  } = consoleApi.codes.getDiscountCodes.useInfiniteQuery(
    {
      limit: pagination.pageSize,
    },
    {
      getNextPageParam: ({ hasMoreNext, nextCursor }) => {
        return hasMoreNext ? nextCursor : null;
      },
      getPreviousPageParam: ({ hasMorePrev, prevCursor }) => {
        return hasMorePrev ? prevCursor : null;
      },
    },
  );

...
<Button
  onClick={() => {
                dataFetchNextPage();
                table.nextPage();
              }}
...
  const {
    data: discountCodes,
    isFetchingNextPage,
    isFetchingPreviousPage,
    isFetching,
    hasNextPage,
    hasPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
  } = consoleApi.codes.getDiscountCodes.useInfiniteQuery(
    {
      limit: pagination.pageSize,
    },
    {
      getNextPageParam: ({ hasMoreNext, nextCursor }) => {
        return hasMoreNext ? nextCursor : null;
      },
      getPreviousPageParam: ({ hasMorePrev, prevCursor }) => {
        return hasMorePrev ? prevCursor : null;
      },
    },
  );

...
<Button
  onClick={() => {
                dataFetchNextPage();
                table.nextPage();
              }}
...
3 replies
TTCTheo's Typesafe Cult
Created by antoine on 9/6/2023 in #questions
setting state param in nextauth
Does anyone know how to set the state query key to oauth providers instead of having nextauth set it automatically? I'm using Auth0 so I need my custom state value sent to the /authorize endpoint and returned back to my callback
3 replies
TTCTheo's Typesafe Cult
Created by antoine on 8/8/2023 in #questions
extending trpc middleware
When making a procedure with middleware, is there any difference between using .unstable_pipe() to extend an existing middleware and then .use() versus just .use() on an existing procedure using the existing middleware?
4 replies
TTCTheo's Typesafe Cult
Created by antoine on 7/7/2023 in #questions
need help with keepPreviousData in trpc client / tanstack query
API call: 
  const [userToFind, setUserToFind] = useState("");
  const {
    data: foundUsers, // array of objects
    isFetching: isSearchUsersFetching,
    isFetched: isSearchUsersFetched,
  } = api.user.searchByUsername.useQuery(userToFind, {
    enabled: userToFind.length > 0,
    initialData: [],
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    retry: false,
    keepPreviousData: true,
  });
  const [userToFind, setUserToFind] = useState("");
  const {
    data: foundUsers, // array of objects
    isFetching: isSearchUsersFetching,
    isFetched: isSearchUsersFetched,
  } = api.user.searchByUsername.useQuery(userToFind, {
    enabled: userToFind.length > 0,
    initialData: [],
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    retry: false,
    keepPreviousData: true,
  });
rendering foundUsers: 
{(isSearchUsersTyping || isSearchUsersFetching) &&
foundUsers.length === 0 ? (
  <CardContent className="flex justify-center py-2">
    Loading...
  </CardContent>
) : foundUsers.length === 0 ? (
  <CardContent className="flex justify-center py-2">
    Results not found
  </CardContent>
) : (
  foundUsers.map((u, idx) => (
    // jsx
  ))
)}
{(isSearchUsersTyping || isSearchUsersFetching) &&
foundUsers.length === 0 ? (
  <CardContent className="flex justify-center py-2">
    Loading...
  </CardContent>
) : foundUsers.length === 0 ? (
  <CardContent className="flex justify-center py-2">
    Results not found
  </CardContent>
) : (
  foundUsers.map((u, idx) => (
    // jsx
  ))
)}
I update userToFind through an input field (its debounced), and I'm trying to prevent Loading... from flashing when foundUsers is refetched. I tried keepPreviousData: true, but it didn't fix this issue. I'm not really sure what the issue could be. I tried staleTime: Infinity, but that just prevents a refetch. For now, I might keep the previous data in a separate state and render that while foundUsers is being refetched. Can anyone help with this? Let me know if you need more details.
10 replies