Wasp-lang•2w ago

How differentiate different status codes on client from HTTPerror thrown

I have operations that find a document by id and throws error 404 if not found. On client side , I want to check for status code is 404 and then udpate UI saying no documents present. In the console, the type of the error thrown comes as WASPHttperror, but I could n'tfind this type to reference in client code.

3 Replies

kapa.ai•2w ago

Hi @p4j4r5. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To differentiate between different status codes on the client side for HTTPErrors thrown by Wasp operations, you can follow this approach: 1. On the server side, you can throw an HttpError with the appropriate status code (like 404) when a document is not found:

import { HttpError } from 'wasp/server'

export const getDocument = async (id, context) => {
  const document = await findDocumentById(id)
  if (!document) {
    throw new HttpError(404, "Document not found")
  }
  return document
}

import { HttpError } from 'wasp/server'

export const getDocument = async (id, context) => {
  const document = await findDocumentById(id)
  if (!document) {
    throw new HttpError(404, "Document not found")
  }
  return document
}

2. On the client side, Wasp will automatically handle these errors. For operations with status codes in the 4xx range, the error details (including the status code) will be forwarded to the client as mentioned in the Wasp documentation (https://wasp-lang.dev/docs/data-model/operations/queries#error-handling). 3. When calling the operation on the client side, you can catch the error and check its status code:

import { useQuery } from 'wasp/client/operations'

const MyComponent = ({ documentId }) => {
  const { data, error, isLoading } = useQuery(getDocument, { id: documentId })

  if (isLoading) return <div>Loading...</div>
  
  if (error) {
    if (error.status === 404) {
      return <div>No document found</div>
    }
    return <div>An error occurred: {error.message}</div>
  }

  return <div>{data.title}</div>
}

import { useQuery } from 'wasp/client/operations'

const MyComponent = ({ documentId }) => {
  const { data, error, isLoading } = useQuery(getDocument, { id: documentId })

  if (isLoading) return <div>Loading...</div>
  
  if (error) {
    if (error.status === 404) {
      return <div>No document found</div>
    }
    return <div>An error occurred: {error.message}</div>
  }

  return <div>{data.title}</div>
}

In this example, we're using the useQuery hook to call the getDocument operation. The error object returned by useQuery will include the status property for 4xx errors, allowing you to check for specific status codes like 404. Note that the WASPHttpError type you're seeing in the console is an internal Wasp type. On the client side, you don't need to explicitly reference this type. Instead, you can simply use the properties of the error object as shown in the example above. This approach allows you to differentiate between different status codes and update your UI accordingly, such as displaying a "No documents present" message for 404 errors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @p4j4r5, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

p4j4r5OP•2w ago

@kapa.ai What is the function to use instead of useQuery when interacting with actions

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- For interacting with actions in Wasp, you don't need to use a specific hook like useQuery. Instead, you can call actions directly. However, Wasp does provide a useAction hook for adding extra behavior to actions, such as optimistic updates. Here's a breakdown of how you can work with actions: 1. Direct calling: You can import and call actions directly from wasp/client/operations. This is the simplest way to use actions, as shown in the Wasp documentation (https://wasp-lang.dev/docs/data-model/operations/actions#using-actions):

   import { createTask, markTaskAsDone } from 'wasp/client/operations'

   // Using actions directly
   const newTask = await createTask({ description: 'Learn TypeScript' })
   await markTaskAsDone({ id: 1 })

   import { createTask, markTaskAsDone } from 'wasp/client/operations'

   // Using actions directly
   const newTask = await createTask({ description: 'Learn TypeScript' })
   await markTaskAsDone({ id: 1 })

2. Using the useAction hook: If you need additional features like optimistic updates, you can use the useAction hook. The Wasp documentation (https://wasp-lang.dev/docs/data-model/operations/actions#the-useaction-hook-and-optimistic-updates) mentions that this hook currently only supports specifying optimistic updates. It's important to note the key differences between queries and actions, as explained in the Wasp documentation (https://wasp-lang.dev/docs/data-model/operations/actions#differences-between-queries-and-actions): 1. Actions can modify the server's state, while queries are only for reading. 2. Actions don't need to be reactive, so you can call them directly without a hook. 3. Wasp provides the useAction hook for adding extra behavior, but it's not required for basic usage. In summary, for most cases, you can simply import and call actions directly without using a specific hook. The useAction hook is available if you need advanced features like optimistic updates. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @p4j4r5, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Gaming

Programming

How differentiate different status codes on client from HTTPerror thrown