Splinter posted:

With react-query, any ideas for a re-usable/maintainable way of adding a pause (presumably via setTimeout) in a mutation's onSuccess callback prior to calling queryClient.invalidateQueries() other than manually writing this timeout into any mutations that need this functionality?

The issue I'm running into is parts of this app write/fetch from a 3rd party API (through the app's backend server, the frontend isn't directly making requests to the 3rd party API) and there's a significant (on a programming scale) delay in terms of how long it takes the results of write requests to propagate to the results of GET requests. For instance, after sending a request that should remove an item from at list, it seems to take around 800ms before the GET query that fetches the list actually starts returning the updated list with the removed data. This is long enough that a typical RQ workflow of just calling invalidateQueries in onSuccess results in the queries completing their refetching before the change is reflected in the GET data.

This can be partially alleviated by using setQueryData to update expected queries immediately without relying on a refetch via invalidate, but I'd still like to setup invalidates to work as expected just so other devs on this project to run into the same problem in the future.

Only a portion of the app's queries fetch from this 3rd party API, so this isn't something that needs to be applied to all invalidates.

The Merkinman posted:

Just wanted to pop in and say Typescript is the most anal retentive garbage I have ever experienced.

Trying to learn something new? Better hope whatever you're researching was written that day with that exact version of typescript, otherwise it'll throw compilation errors no one else gets, to the point you just make the linting so lax to make progress that it defeats the whole point of typescript in the first place.

teen phone cutie posted:

typescript is good, post the code

The Merkinman posted:

code:

error TS2698: Spread types may only be created from object types.

The Merkinman posted:

code:

error TS2722: Cannot invoke an object which is possibly 'undefined'.

The Merkinman posted:

The Merkinman posted:

Trying to learn something new? Better hope whatever you're researching was written that day with that exact version of ...

Ima Computer posted:

You can substitute the any for Record<string, unknown> (a record of unknown values) and get a spreadable type.

The Merkinman posted:

What's the benefit of that vs Array<any>?

fsif posted:

But like, here's the code I have to write to pass a simple ref into Zustand. The code's hideous and I never needed to revisit past the literal day I wrote it. You can't tell me this saved me time!

fsif posted:

I use TypeScript in most of my projects and generally like it but I work for an agency and we have to get things out quickly and most of our sites/apps don't need to be maintained for more than the duration of an advertising campaign. Obviously it's a different calculation if you work on a product team.

But like, here's the code I have to write to pass a simple ref into Zustand. The code's hideous and I never needed to revisit past the literal day I wrote it. You can't tell me this saved me time!

TypeScript code:

type StoreState = {
  containerRef: React.MutableRefObject<HTMLDivElement | null> | null;
  setContainerRef: (ref: React.MutableRefObject<HTMLDivElement | null>) => void;
}

export const useStore = create<StoreState>()((set) => ({
    containerRef: null,
    setContainerRef: (ref: React.MutableRefObject<HTMLDivElement | null>) =>
      set({ containerRef: ref }),
})

Roadie posted:

Here's the version with a bit less boilerplate:

TypeScript code:

import { RefObject } from 'react';
import { create } from 'zustand';

export const useStore = create<{
  containerRef: RefObject<HTMLDivElement>;
  setContainerRef: (ref: RefObject<HTMLDivElement>) => void;
}>((set) => ({
  containerRef: null,
  setContainerRef: (containerRef) => set({ containerRef }),
}));

Pointlessly making separate type declarations is one of those things I see people do over and over with TS and I don't understand why.

fsif posted:

TIL I learned about RefObject (thanks!) but this is still the baseline for comparison:

JavaScript code:

import create from 'zustand';

export const useStore = create((set) => ({
  containerRef: null,
  setContainerRef: (containerRef) => set({ containerRef }),
}));

duck monster posted:

EVERYTHING is overkill in 2023 web development.

prom candy posted:

There's nothing stopping anyone from making websites the old fashioned way. All that stuff still works.

Jabor posted:

My backend doesn't have a thousand bullshit one-developer libraries that are one dev meltdown away from automatically sticking malware in my build process.

YMMV if your backend is in node or dotnet or similar though

Jabor posted:

My backend doesn't have a thousand bullshit one-developer libraries that are one dev meltdown away from automatically sticking malware in my build process.

YMMV if your backend is in node or dotnet or similar though