Fix directly calling operations on the frontend #1992

sodic · 2024-04-24T16:42:57Z

Fixes #1923.

I'll do all the testing once this gets approved.
I've already tested it a couple of times and it all works, but I'll hold of the final just-in-case tests until all changes are final.

Tasks:

sodic · 2024-04-24T16:55:37Z

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts

-  async function query(queryKey, queryArgs) {
+  async function query(queryArgs) {
+    // Assumes `addMetadataToQuery` added the `queryCacheKey` property to the query.
+    const queryKey = (query as any).queryCacheKey


Todo: fix the issue in operations/core.ts#useQuery where they call it with the cache key.

Test for queries that have a payload.

sodic · 2024-04-25T13:22:43Z

waspc/examples/todoApp/src/TestRpcTypes.ts

That's right. I've pulled a Miho.

In the future, we'll probably want to replace this with an existing type testing library:
https://stackoverflow.com/a/58831534

sodic · 2024-04-25T16:40:31Z

waspc/data/Generator/templates/sdk/wasp/client/operations/actions/core.ts

-  Action<Parameters<BackendAction>[0], _Awaited<_ReturnType<BackendAction>>>
-
+export type ActionFor<BackendQuery extends GenericBackendAction> =
+  Parameters<BackendQuery> extends []


Todo: comment on why this was necessary.

sodic · 2024-04-29T12:24:24Z

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts

-) {
-  query.queryCacheKey = [relativeQueryPath]
+// PRIVATE API (used in SDK)
+export function buildAndRegisterQuery<Input, Output>(


Having a proper function (i.e., a smart constructor) seemed cleaner than having a function with side effects that you might forget to call.

sodic · 2024-04-29T12:26:02Z

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts

+// PRIVATE API (used in SDK)
+export function buildAndRegisterQuery<Input, Output>(
+  queryFn: ClientOperation<Input, Output>,
+  { queryCacheKey, queryRoute, entitiesUsed }: 


I took the creation of the queryCacheKey out to make it easily accessible in createQuery. The bonus is that this function now has fewer responsibilities.

sodic · 2024-04-29T12:27:45Z

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts

+export type QueryFor<BackendQuery extends GenericBackendOperation> =
+  QueryForFunction<QueryFunctionFor<BackendQuery>>
+
+type QueryFunctionFor<BackendQuery extends GenericBackendOperation> =
+  OperationRpcFor<BackendQuery>

+// PRIVATE API (needed in SDK)
+type QueryForFunction<QF extends QueryFunction<never, unknown>> = 
+  QF & QueryMetadata


I decided to avoid duplicating the same code for Queries and Actions this time around, mostly because that's what caused an incorrect type in RPC calls for queries.

sodic · 2024-04-29T12:28:18Z

waspc/data/Generator/templates/sdk/wasp/client/operations/rpc.ts

+export type Query<Input, Output> = QueryFunction<Input, Output> & QueryMetadata
+
+// PRIVATE API (but should maybe be public, users define values of this type)
+export type Action<Input, Output> = ClientOperation<Input, Output>


@infomiho What do you think? Should these types be added to our public API?

Won't do this now, but I can create an issue.

sodic · 2024-04-29T12:30:12Z

waspc/data/Generator/templates/sdk/wasp/client/operations/rpc.ts

+export type QueryMetadata = {
+  queryCacheKey: string[]
+  route: Route
+}


I decided to expose both route and queryCacheKey to our users:

queryCacheKey - Because they need it to unlock all the capabilities of tanstack-query (as our docs tell them)

route - Because I didn't want to complicate things by introducing another "internal" type.

Let me know if you think this is a problem

sodic · 2024-04-29T12:51:41Z

waspc/data/Generator/templates/sdk/wasp/client/operations/rpc.ts

+
+// PRIVATE API (needed in SDK)
+export type OperationRpcFor<BackendOperation extends GenericBackendOperation> =
+  Parameters<BackendOperation> extends []


A playground link that explains why we need Parameters<BackendOperation> extends [].

sodic · 2024-04-29T12:54:40Z

waspc/examples/todoApp/src/actions.ts

+  const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms))
+  await sleep(5000)


I'll comment this out after testing.

sodic · 2024-04-29T12:54:53Z

waspc/examples/todoApp/src/Todo.tsx

+async function logAll() {
+  const tasks = await getTasks()
+  console.info('Got tasks:', tasks)
+
+  const someId = tasks.map((task) => task.id).find((id) => id)
+  if (!someId) {
+    console.info('No tasks found')
+  } else {
+    const task = await getTask({ id: someId })
+    console.info(`Got task with id ${someId}`, task)
+  }
+
+  const date = await getDate()
+  console.info('Got date:', date)
+
+  const anything = await getAnything()
+  console.info('Got anything:', anything)
+}


I'll comment this out after testing.

sodic · 2024-04-29T12:55:10Z

waspc/examples/todoApp/src/pages/Task.tsx

Only formatting.

sodic · 2024-04-29T12:56:09Z

waspc/examples/todoApp/src/queries.ts

+export const getAnything: GetAnything = async () => {
+  return 'anything'
+}
+
+export const getTrueVoid = (async () => {
+  return 'anything'
+}) satisfies GetTrueVoid


This is all that's new. I've added these Queries to cover all edge cases with my types tests in TestRpcTypes.

The rest of the file is formatting.

infomiho

Good stuff!

I like the cleanup you did, left some minor comments

infomiho · 2024-04-30T14:18:49Z

waspc/examples/todoApp/src/queries.ts

+  type GetTask,
+  type GetTasks,
+  type GetDate,
+  GetAnything,


Why not prefix it with type as well?

infomiho · 2024-04-30T14:19:45Z

waspc/examples/todoApp/src/actions.ts

@@ -43,8 +43,8 @@ export const updateTaskIsDone: UpdateTaskIsDone<
  }

  // Uncomment to test optimistic updates


Do we want to comment this again or we want to keep it :)

Yes, I guess it's better if we keep it. It will make it obvious that optimistic updates are broken. Good call

infomiho · 2024-04-30T14:22:24Z

waspc/examples/todoApp/src/Todo.tsx

 export function areThereAnyTasks(
  tasks: Task[] | undefined
 ): tasks is NonEmptyArray<Task> {
  return !!(tasks && tasks.length > 0)
 }

 const Todo = () => {
+  logAll()


Maybe it would be a lot of work, but maybe output the values you received here and show it on the client somehow and then maybe create a headless test to check? Something like https://github.com/wasp-lang/wasp/pull/1995/files#diff-4ff0892633d41d0e5068ff93600cab7bf876e4b1bf2e1195e23836b513017fc5R1

Good idea, but too much work for now (I was going to remove these logs).

I'll definitely create an issue for it though.

infomiho · 2024-04-30T15:20:34Z

waspc/examples/todoApp/src/App.tsx


 import './Main.css'
 import { getName } from './user'
+// Necessary to trigger type tests.
+import './TestRpcTypes'


I'd recommend maybe creating a type-tests folder or something like that and then import a index.ts from that folder to keep things a bit more organised.

Then you could put the helpers in typeTestHelpers or something like that and then the RPC tests just in its own file.

infomiho · 2024-04-30T15:20:54Z

waspc/examples/todoApp/src/TestRpcTypes.ts

+// For the details of this specification, see
+// https://github.com/wasp-lang/wasp/pull/1090#discussion_r1159732471
+
+// This should be [],


Maybe put a TODO here

I'll do you one better: #2004

infomiho · 2024-04-30T15:24:30Z

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/index.ts

@@ -12,5 +12,5 @@ export const {= operationName =}: QueryFor<{= operationTypeName =}> = createQuer
 )
 {=/ queries =}

-// PRIVATE API
-export { addMetadataToQuery } from './core'
+// PRIVATE API (used in SDK)


If used only in SDK, do you need to expose in the package.json?

No, that's what we'll do as part of #1922.

But for now, yes (since other parts of SDK use it as a package import).

infomiho · 2024-04-30T15:32:42Z

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts

-  query.queryCacheKey = [relativeQueryPath]
+// PRIVATE API (used in SDK)
+export function buildAndRegisterQuery<Input, Output>(
+  queryFn: ClientOperation<Input, Output>,


How not use QueryFunction here?

Nice catch. I introduced QueryFunction after writing this code and forgot to update it.

infomiho · 2024-04-30T15:33:18Z

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts

+  { queryCacheKey, queryRoute, entitiesUsed }: 
+  { queryCacheKey: string[], queryRoute: Route, entitiesUsed: string[] }
+): QueryForFunction<typeof queryFn> {
+  const query = queryFn as QueryForFunction<typeof queryFn>


infomiho · 2024-04-30T15:33:29Z

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts

  query.route = queryRoute
  addResourcesUsedByQuery(query.queryCacheKey, entitiesUsed)
+
+  return query
+


Nit: extra new line

infomiho · 2024-04-30T15:35:58Z

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts

+export type QueryFor<BackendQuery extends GenericBackendOperation> =
+  QueryForFunction<QueryFunctionFor<BackendQuery>>
+
+type QueryFunctionFor<BackendQuery extends GenericBackendOperation> =
+  OperationRpcFor<BackendQuery>

+// PRIVATE API (needed in SDK)
+type QueryForFunction<QF extends QueryFunction<never, unknown>> = 
+  QF & QueryMetadata


I found this block hard to parse, maybe put some why comment on top to make it easier for us in the future to get back into this code.

Improve directly calling queries on the client

d8651a8

sodic commented Apr 24, 2024

View reviewed changes

sodic added 3 commits April 25, 2024 11:38

Improve typescript support in operations

c7d8adf

Improve full stack type safety

c309ad3

Add e2e tests for full stack type safety

83d24dc

sodic force-pushed the filip-fix-frontend-queries branch from 4e4cf5a to 83d24dc Compare April 25, 2024 13:00

sodic commented Apr 25, 2024

View reviewed changes

sodic added 7 commits April 25, 2024 15:54

Add more features to todoApp

7f5876b

Make queryCacheKey visible to users

6bc94cf

Remove redundancies from useAuth hook

e8273c9

Rename InternalViewFor to QueryForFunction

43a9d71

Remove redundant type assertion

6249c97

Add one more type to be extra safe

f9b674a

Improve naming

a659278

sodic commented Apr 25, 2024

View reviewed changes

sodic added 7 commits April 26, 2024 11:09

Add type tests for getMe

e81f2e4

Improve function that adds metadata to queries

9d4e2d1

DRY up RPC types

ccde43a

Separate RPC from hooks

15224f8

Remove redundant import

e11581e

Remove redundant parentheses

e4f175f

Change formatting

2b9f022

sodic commented Apr 29, 2024

View reviewed changes

Add comment explaining type

3c8aac5

sodic commented Apr 29, 2024

View reviewed changes

waspc/examples/todoApp/src/pages/Task.tsx Outdated

Copy link

Contributor Author

sodic Apr 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only formatting.

sodic commented Apr 29, 2024

View reviewed changes

sodic marked this pull request as ready for review April 29, 2024 12:56

Update docs

3271aaa

infomiho reviewed Apr 30, 2024

View reviewed changes

sodic added 5 commits May 2, 2024 13:56

Add type modifier to imports

ee25c74

Reorganize type tests

dcfb9c9

Reformat and improve types for queries/core

fc5a20a

Add comments explaining RPC types

d7e1591

Add comment that links to void type issue

d52a931

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix directly calling operations on the frontend #1992

Fix directly calling operations on the frontend #1992

sodic commented Apr 24, 2024 •

edited

sodic Apr 24, 2024

sodic Apr 25, 2024 •

edited

sodic Apr 25, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

infomiho left a comment

infomiho Apr 30, 2024

infomiho Apr 30, 2024

sodic May 2, 2024

infomiho Apr 30, 2024

sodic May 2, 2024

infomiho Apr 30, 2024

infomiho Apr 30, 2024

infomiho Apr 30, 2024

sodic May 3, 2024

infomiho Apr 30, 2024

sodic May 2, 2024

infomiho Apr 30, 2024

sodic May 2, 2024 •

edited

infomiho Apr 30, 2024

infomiho Apr 30, 2024

infomiho Apr 30, 2024

		const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms))
		await sleep(5000)

		@@ -43,8 +43,8 @@ export const updateTaskIsDone: UpdateTaskIsDone<
		}

		// Uncomment to test optimistic updates

Fix directly calling operations on the frontend #1992

Are you sure you want to change the base?

Fix directly calling operations on the frontend #1992

Conversation

sodic commented Apr 24, 2024 • edited

Choose a reason for hiding this comment

sodic Apr 25, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

infomiho left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic May 2, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic commented Apr 24, 2024 •

edited

sodic Apr 25, 2024 •

edited

sodic May 2, 2024 •

edited