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:

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

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

Open an issue for it?

We already have one: #1951

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

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.

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

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 []


TS Playground link explaining why this check was necessary.

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

Left it in but shortened the delay: #2025

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. Here it is: #2011

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.

infomiho

LGTM, make sure that CI is passing successfully

…end-queries

sodic · 2024-05-07T11:22:45Z

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

  return rqUseQuery({
-    queryKey,
-    queryFn: () => queryFn(queryKey, queryFnArgs),
+    queryKey: makeQueryCacheKey(query, queryFnArgs),


This is unfortunate duplication.

Will explain soon.

Covered here: #2017

Improve directly calling queries on the client

d8651a8

sodic commented Apr 24, 2024

View reviewed changes

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts Outdated Show resolved Hide resolved

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

waspc/data/Generator/templates/sdk/wasp/client/operations/actions/core.ts Outdated Show resolved Hide resolved

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

waspc/data/Generator/templates/sdk/wasp/client/operations/rpc.ts Outdated Show resolved Hide resolved

sodic commented Apr 29, 2024

View reviewed changes

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

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

sodic mentioned this pull request May 6, 2024

Create headless tests for RPC #2011

Open

sodic added 2 commits May 6, 2024 14:55

Remove unnecessary exports and add clarifying comments

74d5e2a

Remove empty line

c4de989

infomiho approved these changes May 6, 2024

View reviewed changes

sodic added 2 commits May 6, 2024 18:42

Fix type errors in queries/core

606ee83

Fix optimistic update issues

bfc6fe8

sodic mentioned this pull request May 7, 2024

Introduce automated tests for types #1951

Open

sodic added 4 commits May 7, 2024 11:19

Remove redundant type

ab6f014

Update e2e tests

590c33a

Merge branch 'main' of github.com:wasp-lang/wasp into filip-fix-front…

1fd0042

…end-queries

Add operations to todoApp

8e93092

sodic commented May 7, 2024

View reviewed changes

sodic merged commit 1699862 into main May 7, 2024
6 checks passed

sodic deleted the filip-fix-frontend-queries branch May 7, 2024 11:25

This was referenced May 7, 2024

Revisit our client cache implementation #2017

Open

Small cleanup after #1992 #2021

Merged

sodic added a commit that referenced this pull request May 8, 2024

Small cleanup after #1992 (#2021)

31161d1

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

Loading

sodic Apr 25, 2024 •

edited

Loading

Martinsos May 6, 2024

sodic May 7, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024

sodic Apr 29, 2024 •

edited

Loading

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

sodic May 8, 2024 •

edited

Loading

infomiho Apr 30, 2024

sodic May 2, 2024 •

edited

Loading

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

Loading

infomiho Apr 30, 2024

infomiho Apr 30, 2024

infomiho Apr 30, 2024

infomiho left a comment

sodic May 7, 2024

sodic May 8, 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

Fix directly calling operations on the frontend #1992

Conversation

sodic commented Apr 24, 2024 • edited Loading

sodic Apr 25, 2024 • edited Loading

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 Apr 29, 2024 • edited Loading

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

sodic May 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic May 2, 2024 • edited Loading

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 Loading

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

sodic commented Apr 24, 2024 •

edited

Loading

sodic Apr 25, 2024 •

edited

Loading

sodic Apr 29, 2024 •

edited

Loading

sodic May 8, 2024 •

edited

Loading

sodic May 2, 2024 •

edited

Loading

sodic May 2, 2024 •

edited

Loading