refactor: start getting rid of apiQueryClient
#2597
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
app/pages/ProjectsPage.tsx
Outdated
| // TODO: figure out if this is invalidating as expected, can we leave out the query | ||
| // altogether, etc. Look at whether limit param matters. | ||
| apiQueryClient.invalidateQueries('projectList') | ||
| invalidate('projectList') |
There was a problem hiding this comment.
So, ideally we could do this as something like this:
queryClient.invalidateQueries(projectList.optionsFn())or (to be clearer about what's going on)
queryClient.invalidateQueries({ queryKey: projectList.optionsFn().queryKey })The problem here is that that queryKey has way too much specificity. Even without a page token specified, it will have the limit on it:
Lines 168 to 169 in e4f70b0
which means it won't invalidate any other fetches for the project list that have a different limit, and it won't invalidate any cached queries for pages other than the first one. This shows the wisdom of our approach of just using the method key alone without any parameters, which has the effect of invalidating any cached projectList fetch, regardless of the details.
I have an idea, though. If the list option object has another method that returns just the method key, we could use that.
app/pages/ProjectsPage.tsx
Outdated
| project | ||
| ) | ||
| const queryOptions = apiq('projectView', { path: { project: project.name } }) | ||
| queryClient.setQueryData(queryOptions.queryKey, project) |
There was a problem hiding this comment.
I was surprised to discover this does actually enforce the type of project matches the endpoint. setQueryData is inferring it from the type of the options object.
david-crespo
force-pushed
the
convert-query-client-example
branch
from
d6e37f3 to
a134c36
Compare
| this.invalidateQueries({ queryKey: [method] }) | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
This approach feels good, much better than a separate invalidate function (which I tried in 622bc80) or a separate apiQueryClient, like we have now. I like that it adds a new method and does not touch existing methods.
| // avoid the project fetch when the project page loads since we have the data | ||
| queryClient.setQueryData('projectView', { path: { project: project.name } }, project) | ||
| const { queryKey } = projectView({ project: project.name }) | ||
| queryClient.setQueryData(queryKey, project) |
There was a problem hiding this comment.
I think this is kind of cool. Even though it's two lines, it's much more explicit about what's going on.
app/forms/project-edit.tsx
Outdated
| @@ -23,29 +18,31 @@ import { getProjectSelector, useProjectSelector } from '~/hooks/use-params' | |||
| import { addToast } from '~/stores/toast' | |||
| import { pb } from '~/util/path-builder' | |||
|
|
|||
| const projectView = ({ project }: { project: string }) => | |||
| apiq('projectView', { path: { project } }) | |||
There was a problem hiding this comment.
I'm realizing that these functions from selectors to query args are totally generic, likely to be used in multiple places, and could even be generated. In the meantime I'll try collecting some in a file.
david-crespo
force-pushed
the
convert-query-client-example
branch
from
29a45cd to
8444dc1
Compare
david-crespo
force-pushed
the
convert-query-client-example
branch
from
a205b25 to
b3bd45f
Compare
|
I'm happy with |
david-crespo
force-pushed
the
convert-query-client-example
branch
from
127a6b3 to
604ecf5
Compare
oxidecomputer/console@fd47bee...927c8b6 * [927c8b63](oxidecomputer/console@927c8b63) oxidecomputer/console#2608 * [01a0ac99](oxidecomputer/console@01a0ac99) oxidecomputer/console#2597 * [243c55d7](oxidecomputer/console@243c55d7) oxidecomputer/console#2606 * [deb5e187](oxidecomputer/console@deb5e187) oxidecomputer/console#2603 * [67633aac](oxidecomputer/console@67633aac) oxidecomputer/console#2601 * [6405e0cb](oxidecomputer/console@6405e0cb) oxidecomputer/console#2605 * [8c37bad2](oxidecomputer/console@8c37bad2) oxidecomputer/console#2602 * [081599c3](oxidecomputer/console@081599c3) oxidecomputer/console#2599
oxidecomputer/console@fd47bee...927c8b6 * [927c8b63](oxidecomputer/console@927c8b63) oxidecomputer/console#2608 * [01a0ac99](oxidecomputer/console@01a0ac99) oxidecomputer/console#2597 * [243c55d7](oxidecomputer/console@243c55d7) oxidecomputer/console#2606 * [deb5e187](oxidecomputer/console@deb5e187) oxidecomputer/console#2603 * [67633aac](oxidecomputer/console@67633aac) oxidecomputer/console#2601 * [6405e0cb](oxidecomputer/console@6405e0cb) oxidecomputer/console#2605 * [8c37bad2](oxidecomputer/console@8c37bad2) oxidecomputer/console#2602 * [081599c3](oxidecomputer/console@081599c3) oxidecomputer/console#2599
#2566 added a more flexible and powerful way of making typesafe API calls with React Query, but didn't convert things like
invalidateQueriesandsetQueryDatato use the new style to avoid churn. But we do eventually want to do that and get rid ofapiQueryCliententirely. This PR aims to figure out what that will look like.