Wasp•10mo ago

Post-query errors about failing to resolve an import.

Hey there! We're building something that involves creating appointments, assigning technicians, and more but we hit a bump early and can't seem to work our way past this error(attached). We have tried making and moving folders and changing path names to be accurate but still nothing. I believe we started that latest(and problem) import in the mainpage.jsx as '@wasp/client/operations' and then tried switching to accommodate some errors but left off as is. The last steps we have done were create the query, the queries.js file(with export inside), and the declarations inside mainpage.jsx. I have tried reading about this from the couple other posts about failing to resolve imports but I believe they we're further along in their development. Any help to push us forward is greatly appreciated.

7 Replies

TillaOP•10mo ago

code for extra context

Vinny (@Wasp)•10mo ago

hey there I think your issue might be that you're importing useQuery from the incorrect file. Take this example from the docs, for instance:

import React from 'react'
import { useQuery } from '@wasp/queries'
import getAllTasks from '@wasp/queries/getAllTasks'
import getFilteredTasks from '@wasp/queries/getFilteredTasks'

const MainPage = () => {
  const { data: allTasks, error: error1 } = useQuery(getAllTasks)
  const { data: doneTasks, error: error2 } = useQuery(getFilteredTasks, {
    isDone: true,
  })

  if (error1 !== null || error2 !== null) {
    return <div>There was an error</div>
  }

  return (
    <div>
      <h2>All Tasks</h2>
      {allTasks && allTasks.length > 0
        ? allTasks.map((task) => <Task key={task.id} {...task} />)
        : 'No tasks'}

      <h2>Finished Tasks</h2>
      {doneTasks && doneTasks.length > 0
        ? doneTasks.map((task) => <Task key={task.id} {...task} />)
        : 'No finished tasks'}
    </div>
  )
}

const Task = ({ description, isDone }: Task) => {
  return (
    <div>
      <p>
        <strong>Description: </strong>
        {description}
      </p>
      <p>
        <strong>Is done: </strong>
        {isDone ? 'Yes' : 'No'}
      </p>
    </div>
  )
}

export default MainPage

import React from 'react'
import { useQuery } from '@wasp/queries'
import getAllTasks from '@wasp/queries/getAllTasks'
import getFilteredTasks from '@wasp/queries/getFilteredTasks'

const MainPage = () => {
  const { data: allTasks, error: error1 } = useQuery(getAllTasks)
  const { data: doneTasks, error: error2 } = useQuery(getFilteredTasks, {
    isDone: true,
  })

  if (error1 !== null || error2 !== null) {
    return <div>There was an error</div>
  }

  return (
    <div>
      <h2>All Tasks</h2>
      {allTasks && allTasks.length > 0
        ? allTasks.map((task) => <Task key={task.id} {...task} />)
        : 'No tasks'}

      <h2>Finished Tasks</h2>
      {doneTasks && doneTasks.length > 0
        ? doneTasks.map((task) => <Task key={task.id} {...task} />)
        : 'No finished tasks'}
    </div>
  )
}

const Task = ({ description, isDone }: Task) => {
  return (
    <div>
      <p>
        <strong>Description: </strong>
        {description}
      </p>
      <p>
        <strong>Is done: </strong>
        {isDone ? 'Yes' : 'No'}
      </p>
    </div>
  )
}

export default MainPage

btw 1: it seems you're using wasp version 0.11.8 so make sure you're looking at that version of the docs and not 0.12 https://wasp-lang.dev/docs/0.11.8/data-model/operations/queries#using-queries 2. when you share code, copy and paste it and add three backticks ` to the top and bottom of the code snippet

```

```

code here

```

```

martinsos•10mo ago

You import is looking wrong! So it should likely be

import getAppointments from '@wasp/queries/getAppointments'
import { useQuery } from '@wasp/queries'

import getAppointments from '@wasp/queries/getAppointments'
import { useQuery } from '@wasp/queries'

TillaOP•10mo ago

my fault! will note that for next question I inevitably ask

MEE6•10mo ago

Wohooo @Tilla, you just became a Waspeteer level 1!

TillaOP•10mo ago

very simple, very quick! thank you for feedback! will we call for it like that twice with each query that we add onto this? or does that bottom line with the {useQuery} call any/all from that file

martinsos•10mo ago

Hm so I am not quite sure what you mean about this. In that second line, you import useQuery utility function. This allows you to later use useQuery in your code in that file. You will almost always use it in combination with the actualy "query", which is the stuff you improted above: getAppointments, getSomethingElse, and similar. useQuery is your "car", while queries are the "passengers", to put it via a silly analogy -> you need only one car, but can drive each or any passenger as many times as you want with it. We are really wrapping tanstack-query library here, so feel free to look at their docs for som emore examples also!

Gaming

Programming

Post-query errors about failing to resolve an import.