lukesmurray
commented
1 year ago Before this is merged @ardeora has some follow up work that is not included. So please hold off until we have it.
Closed lukesmurray closed 1 year ago
lukesmurray
commented
1 year ago Before this is merged @ardeora has some follow up work that is not included. So please hold off until we have it.
codesandbox-ci[bot]
commented
1 year ago This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit de90e6bf9a4381b6994e7ac2061cd6e5e5346f89:
| Sandbox | Source |
|---|---|
| @tanstack/query-example-react-basic | Configuration |
| @tanstack/query-example-react-basic-typescript | Configuration |
| @tanstack/query-example-solid-basic-typescript | Configuration |
ardeora
commented
1 year ago 🚨 one thing we need to do to make the publish script work is to add solid-query to the package list here (at the end I think):
https://github.com/TanStack/query/blob/357ec041a6fcc4a550f3df02c12ecc7bcdefbc05/scripts/config.ts#L5
Thank you! I added solid-query to the packages in the list below
ardeora
commented
1 year ago let's also add one example to
.codesandbox/ci.jsonso that we can see a preview build of solid-query on each PR:
Yep! I added the typescript example and it's working great here https://codesandbox.io/s/tanstack-query-example-solid-basic-typescript-lhsczt
ardeora
commented
1 year ago Alright I think we should be good to go here. All the tests seem to be passing. And I applied the batching state updates which works great now. Thanks for all the feedback here 😄
TkDodo
commented
1 year ago exciting 🚀
aulneau
commented
1 year ago just wanted to pop in and say great work, this is so exciting!
lukesmurray
commented
1 year ago Ok everything seems to be ready to go. @TkDodo feel free to merge. Please add @ardeora, @lukesmurray, @jennyckaplan, and @oscartbeaumont as co-authors on the final merge if possible. This was a team effort, led by @ardeora and I would love to see everyone get recognition for their contributions here.
Cheers 🍻
codecov-commenter
commented
1 year ago Base: 96.36% // Head: 96.57% // Increases project coverage by +0.21% :tada:
Coverage data is based on head (
de90e6b) compared to base (eab6e2c). Patch has no changes to coverable lines.
:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.
TkDodo
commented
1 year ago I was just about to merge this when I took another look at the codesandbox preview build, and it sadly doesn't render anymore:
https://codesandbox.io/s/tanstack-query-example-solid-basic-typescript-17fbsy
The error is:
Uncaught ReferenceError: React is not defined
at QueryClientProvider (QueryClientProvider.jsx:37:5)
at dev.js:519:12
at untrack (dev.js:425:12)
at Object.fn (dev.js:515:37)
at runComputation (dev.js:695:22)
at updateComputation (dev.js:680:3)
at devComponent (dev.js:526:3)
at createComponent (dev.js:1228:10)
at App (index.tsx:142:3)
at dev.js:519:12I was working yesterday for sure :/
OrJDev
commented
1 year ago I was just about to merge this when I took another look at the codesandbox preview build, and it sadly doesn't render anymore:
https://codesandbox.io/s/tanstack-query-example-solid-basic-typescript-17fbsy
The error is:
Uncaught ReferenceError: React is not defined at QueryClientProvider (QueryClientProvider.jsx:37:5) at dev.js:519:12 at untrack (dev.js:425:12) at Object.fn (dev.js:515:37) at runComputation (dev.js:695:22) at updateComputation (dev.js:680:3) at devComponent (dev.js:526:3) at createComponent (dev.js:1228:10) at App (index.tsx:142:3) at dev.js:519:12I was working yesterday for sure :/
same things here,
it does work tho when using @adeora/solid-query instead of @tanstack/solid-query
TkDodo
commented
1 year ago Yes, we are seeing this, too. This seems to be an upstream problem with vite-plugin-solid.
It worked with 2.3.6 but broke with 2.3.7 which was released today.
we actually pinned the plugin version because of this in our official example, which is working:
TkDodo
commented
1 year ago upstream issue:
ardeora
commented
1 year ago I was just about to merge this when I took another look at the codesandbox preview build, and it sadly doesn't render anymore: https://codesandbox.io/s/tanstack-query-example-solid-basic-typescript-17fbsy The error is:
Uncaught ReferenceError: React is not defined at QueryClientProvider (QueryClientProvider.jsx:37:5) at dev.js:519:12 at untrack (dev.js:425:12) at Object.fn (dev.js:515:37) at runComputation (dev.js:695:22) at updateComputation (dev.js:680:3) at devComponent (dev.js:526:3) at createComponent (dev.js:1228:10) at App (index.tsx:142:3) at dev.js:519:12I was working yesterday for sure :/
same things here, it does work tho when using
@adeora/solid-queryinstead of@tanstack/solid-query
Yeah this was an issue with vite-plugin-solid that we just recently resolved. Can you upgrade vite-plugin-solid to v2.3.8?
https://stackblitz.com/edit/vitejs-vite-csdjj1?file=package.json,src%2Fmain.tsx,src%2FApp.tsx
Here is a working stackblitz sandbox for reference
OrJDev
commented
1 year ago I was just about to merge this when I took another look at the codesandbox preview build, and it sadly doesn't render anymore: https://codesandbox.io/s/tanstack-query-example-solid-basic-typescript-17fbsy The error is:
Uncaught ReferenceError: React is not defined at QueryClientProvider (QueryClientProvider.jsx:37:5) at dev.js:519:12 at untrack (dev.js:425:12) at Object.fn (dev.js:515:37) at runComputation (dev.js:695:22) at updateComputation (dev.js:680:3) at devComponent (dev.js:526:3) at createComponent (dev.js:1228:10) at App (index.tsx:142:3) at dev.js:519:12I was working yesterday for sure :/
same things here, it does work tho when using
@adeora/solid-queryinstead of@tanstack/solid-queryYeah this was an issue with vite-plugin-solid that we just recently resolved. Can you upgrade vite-plugin-solid to v2.3.8?
https://stackblitz.com/edit/vitejs-vite-csdjj1?file=package.json,src%2Fmain.tsx,src%2FApp.tsx
Here is a working stackblitz sandbox for reference
Yes it is ok i managed to get it working and added it as an addon to Create JD App,
great work you did there.
ardeora
commented
1 year ago @all-contributors please add @lukesmurray for code.
ardeora
commented
1 year ago @all-contributors please add @jennyckaplan for code.
allcontributors[bot]
commented
1 year ago @ardeora
I've put up a pull request to add @jennyckaplan! :tada:
ardeora
commented
1 year ago @all-contributors please add @oscartbeaumont for code.
allcontributors[bot]
commented
1 year ago @ardeora
I've put up a pull request to add @oscartbeaumont! :tada:
vyktoremario
commented
1 year ago Why does this break for every patch version of vite-plugin-solid?
It seems as if 2.3.9 which is the latest version is causing the same error as above.
lukesmurray
commented
1 year ago I'm not sure, and I'm sorry you're having that issue. I suggest posting an issue to vite-plugin-solid with some information about the error you're getting. If you're getting an error, it's likely other packages are getting errors as well, and my guess is it is an upstream issue rather than a problem with solid-query. But if you suspect it is an issue with solid-query feel free to open an issue with some more information about the error in this repo, and we will take a look.
milahu
commented
1 year ago why invent new names for the API?
edit: because react is wrong and solid is right. solid also has createSignal, createEffect, ...
| react-query | solid-query |
|---|---|
| useQuery | createQuery |
| useBaseQuery | createBaseQuery |
| useQueries | createQueries |
| useQueryClient | useQueryClient |
| useHydrate | (missing) |
| useQueryErrorResetBoundary | (missing) |
| useIsFetching | useIsFetching |
| useMutation | createMutation |
| useInfiniteQuery | createInfiniteQuery |
| result | state |
milahu
commented
1 year ago @tanstack/solid-query-persist-client draft
because caching + persistence = profit
next challenge:
DOMException: Failed to execute 'put' on 'IDBObjectStore': [object Array] could not be cloned.https://github.com/localForage/localForage/issues/610
if the object contains a function it can't be stored inside a database
with indexeddb persister from https://tanstack.com/query/v4/docs/plugins/persistQueryClient#building-a-persister
problem: queryKey is a solidjs proxy object
queryClient.clientState.queries[i].queryKey
// ❌ react version
const queryKey = ["todos", todo]
useQuery(queryKey, fetchTodos)
// ✅ solid version
const queryKey = ["todos", todo()]
const getQueryKey = () => queryKey
createQuery(getQueryKey, fetchTodos)this looks like a good place to cleanup the queryKey
@tanstack/solid-query/build/solid/createBaseQuery.js
// NOTE(milahu): this is reactive to options
createComputed(() => {
const newDefaultedOptions = queryClient.defaultQueryOptions(options);
// TODO(milahu): cleanup options?
observer.setOptions(newDefaultedOptions);
});indexeddb persister
related: https://github.com/faassen/solid-dexie
related: withCacheStorage in @solid-primitives/fetch
lukesmurray
commented
1 year ago Thank you for the comments @milahu. You figured out the naming logic before I had a chance to reply!
With regard to the missing apis.
useQueryErrorResetBoundary was left out consciously because SolidJS has a built-in error boundary while react does not.useHydration is left out because, in the interest of getting solid-query to the community as fast as possible, we released it without server-side rendering support. There are plans to add server-side rendering support, but I'm not sure if anyone is pursuing it at the moment. You can ask in the discord. That's also probably the best place to talk to the maintainers about the current design and propose new features 😄.About your error, you may want to use unwrap to get the store without a proxy.
About your proposal for the query key. I'm not quite sure if it would work. It depends on what todo is. But if todo is a signal, you're resolving the signal outside of getQueryKey so getQueryKey would not be reactive.
// only runs once
const queryKey = ["todos", todo()]
// runs multiple times but returns the non-reactive array every time
const getQueryKey = () => queryKeyIn general, if you use query key factories the fact that query keys are functions can be abstracted away fairly easily and that's probably the approach I would recommend.
This pull request aims to add the TanStack Query adapter for Solid JS. This pull request will add the following key primitives to the package.
createQuerycreateQueriescreateInfiniteQueriescreateMutationuseIsFetchinguseIsMutatinguseQueryClientQueryClientQueryClientProviderThe adapter docs have been updated as well as examples have been added.
Acknowledgments
The work on solid-query would not have been possible without
This is a follow-up to #4195 but rebased on
mainand with commits frombetaremoved per discussion with @TkDodo and @ardeora.