\r\n}\r\n\r\n```",[2918],{"name":2919,"color":2920},"question","d876e3","examples-v10-next-prisma-starter-sqlite","[RFC] `invalidateQueries` and other `react-query` `useContext()`-fns","2022-08-25T23:31:17Z","https://github.com/trpc/examples-v10-next-prisma-starter-sqlite/issues/3",0.6349936,{"description":2927,"labels":2928,"number":104,"owner":2872,"repository":2929,"state":2902,"title":2930,"updated_at":2931,"url":2932,"score":2925},"Just dumping some thoughts / half-baked ideas here\r\n\r\n\r\n\r\n\r\n- ~~With RSC - is there a point of tRPC? Is there a \"lighter\" approach that might be nice(r)?~~ Maybe, but not for all\r\n- ~~With RSC - is there a point of react-query?~~ yes, there's still client components\r\n- Will there be a way to sync state and make sync the underlying state of the queries from RSC -> client & make *isomorphic* components?\r\n - Biggest question - unsure how state sync can work from a root `\"use client\"` Provider that renders on the server to the client that uses it.\r\n- Will importing the full router on every RSC-request add any significant overhead?\r\n- ~~Will React Context providers be available on the server? If so, it be possible to do any \"isomorphic\" context providers? Will components be able to be isomorphic?~~ This was a misconception. We'll do a root `\"use client\"` component & likely not sync state from actual RSC-components to client\r\n - If query state could be synced from server to client and context providers + components could be isomorphic, we could do stuff like using optimistic updates of a component that was initially rendered on the server.\r\n- How to deal with caching? \r\n- [..]",[],"next-13","Open questions","2022-11-28T10:46:18Z","https://github.com/trpc/next-13/issues/3",{"description":2934,"labels":2935,"number":2936,"owner":2872,"repository":2872,"state":2902,"title":2937,"updated_at":2938,"url":2939,"score":2940},"Let's say I have an API that lists dogs and an API that gets an individual dog. If I delete a dog, I'd like to be able to just do something like:\r\n```typescript\r\nconst utils = trpc.useContext();\r\nutils.invalidateQueries(\"dogs.*\")\r\n```\r\n\r\nCurrently I have to do:\r\n```typescript\r\nconst utils = trpc.useContext();\r\nutils.invalidateQueries([\"dogs.getDog\", { id:\"dog-id\" }])\r\nutils.invalidateQueries([\"dogs.listDogs\"])\r\n```\r\n\r\nUsing vanilla Express and react-query, I'm able to do something like this:\r\n```typescript\r\nconst { data: allDogs } = useQuery([\"dogs\"], /* query definition*/)\r\nconst { data: aDog } = useQuery([\"dogs\", { id: \"dog-id\" }], /* query definition*/)\r\n\r\nconst utils = trpc.useContext();\r\nutils.invalidateQueries([\"dogs\"])\r\n```\r\n\r\nBut with since tRPC structures the query keys for you, I'm not able to.",[],2098,"Support invalidating multiple router queries in one go","2022-07-06T04:22:16Z","https://github.com/trpc/trpc/issues/2098",0.641422,{"description":2942,"labels":2943,"number":2947,"owner":2872,"repository":2872,"state":2902,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Provide environment information\n\n```\r\n System:\r\n OS: macOS 12.5.1\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 77.77 MB / 32.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v16.13.0/bin/yarn\r\n npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm\r\n Browsers:\r\n Brave Browser: 108.1.46.144\r\n Chrome: 108.0.5359.124\r\n Firefox Developer Edition: 108.0\r\n Safari: 15.6.1\r\n npmPackages:\r\n @tanstack/react-query: 4.20.4 => 4.20.4 \r\n @trpc/client: 10.6.0 => 10.6.0 \r\n @trpc/react-query: 10.6.0 => 10.6.0 \r\n @trpc/server: 10.6.0 => 10.6.0 \r\n next: 12.3.0 => 12.3.0 \r\n react: 17.0.2 => 17.0.2 \r\n```\n\n### Describe the bug\n\ngiven that you have an environment where you're mixing `useQuery` from `react-query` and queries from `trpc`, `utils.invalidate()` _used to_ target all queries, but now, it only targets the queries created by trpc.\n\n### Link to reproduction\n\nhttps://codesandbox.io/s/festive-newton-rodx1p?file=/src/pages/index.tsx\n\n### To reproduce\n\n- click the `invalidate` button\r\n- observe that only the query created by trpc is invalidated\n\n### Additional information\n\nThis used to work with `10.0.0-rc.3`\r\n\r\nfrom discord:\r\n\r\n```\r\nquick question: I think the change of query keys (that we now have { type: 'query'} etc. at the end) kind of introduced an issue when using trpc together with \"raw\" react-query queries. For reference, we are gradually upgrading to tprc and still have some \"untyped\" useQuery calls lying around.\r\n\r\nOur issue is that we call utils.invalidate() to invalidate all queries in some cases. It used to target all trpc and react-query queries, but now, it only targets the trpc queries. I've debugged into the queryClient and what we get into the invalidation as a key is [[],{}] and this does match \"all trpc queries\", but not \"all queries\".\r\n\r\nOur workaround is to use the real queryClient for invalidation now, just wanted to let you know about that - maybe it just worked coincidentally before\r\n```\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [ ] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[2944],{"name":2945,"color":2946},"๐ bug","d73a4a",3456,"bug: query invalidation can only target trpc queries","2023-01-06T12:02:03Z","https://github.com/trpc/trpc/issues/3456",0.6500112,{"description":2953,"labels":2954,"number":2961,"owner":2872,"repository":2872,"state":2902,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Provide environment information\n\n```\r\n System:\r\n OS: macOS 12.6\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 93.61 MB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 18.8.0 - ~/.nvm/versions/node/v18.8.0/bin/node\r\n Yarn: 3.2.3 - ~/.nvm/versions/node/v18.8.0/bin/yarn\r\n npm: 8.18.0 - ~/.nvm/versions/node/v18.8.0/bin/npm\r\n Browsers:\r\n Chrome: 105.0.5195.125\r\n Firefox: 103.0\r\n Safari: 16.0\r\n npmPackages:\r\n @trpc/client: 10.0.0-proxy-alpha.76 => 10.0.0-proxy-alpha.76\r\n @trpc/next: 10.0.0-proxy-alpha.76 => 10.0.0-proxy-alpha.76\r\n @trpc/react: 10.0.0-proxy-alpha.76 => 10.0.0-proxy-alpha.76\r\n @trpc/server: 10.0.0-proxy-alpha.76 => 10.0.0-proxy-alpha.76\r\n next: 12.3.0 => 12.3.0\r\n react: 18.2.0 => 18.2.0\r\n```\n\n### Describe the bug\n\nUsing the `.invalidate()` method on a query doesn't seem to actually invalidate the query. However using React Query's native `queryClient.invalidateQueries()` works fine.\n\n### To reproduce\n\nThis seems to not work:\r\n\r\n```ts\r\nconst utils = trpc.useContext()\r\nconst {data} = trpc.user.getAll.useQuery()\r\n\r\nconst addUser = trpc.user.create.useMutation({\r\n onSuccess: async () => {\r\n await utils.user.getAll.invalidate() // Not invalidating the query\r\n },\r\n})\r\n\r\nconst onAddUser: SubmitHandler\u003CUser> = async (data) => {\r\n addUser.mutate(data)\r\n}\r\n```\r\n\r\nbut this does (using native React Query `queryClient`):\r\n\r\n```ts\r\nconst queryClient = useQueryClient()\r\nconst {data} = trpc.user.getAll.useQuery()\r\n\r\nconst addUser = trpc.user.create.useMutation({\r\n onSuccess: async () => {\r\n queryClient.invalidateQueries([`user.getAll`]) // Works\r\n },\r\n})\r\n\r\nconst onAddUser: SubmitHandler\u003CUser> = async (data) => {\r\n addUser.mutate(data)\r\n}\r\n```\n\n### Additional information\n\n_No response_\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [X] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[2955,2958],{"name":2956,"color":2957},"๐ป invalid","e4e669",{"name":2959,"color":2960},"โฎ needs reproduction","000055",2724,"bug: Query invalidation doesn't work","2022-10-10T12:03:50Z","https://github.com/trpc/trpc/issues/2724",0.67086303,["Reactive",2967],{},["Set"],["ShallowReactive",2970],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdDo-qW_MlhM45Wvhcx3YNRr1sVHS_rJV6vOrzS9LWxg":-1},"/trpc/trpc/3648"]