0

I'm trying to find a way to update my query when the route changes (same component). The query is being selected using route meta data. Between Vue router's navigation guards, hooks, watching for changes, etc, and Urqls "useQuery," I can't figure out how to structure it to give me new data when the route changes. I just want it to recognize that "myQuery" has a new value, and to apply that to the query and rerun it.

const route = useRoute();
const myQuery = route.meta.query;

const posts = await useQuery({
  query: gql`
    query posts {
      ${myQuery} {
        title
        description
        interests {
          title
        }
        createdAt
        image_url
        userId {
          username
        }
      }
    }
  `,
  pause: false
});
const data = posts.data;
4
  • 1
    See stackoverflow.com/questions/46402809/… . And the query is supposed to involve reactive variables in order to be able to update it, formidable.com/open-source/urql/docs/basics/vue/#variables Commented Nov 4, 2023 at 16:37
  • @EstusFlask thanks. But can those variables provide the query name itself? Or just args that are passed to the query? I'm trying to use a variable for the query name because it's the only thing that changes on the client. Commented Nov 4, 2023 at 17:28
  • 1
    might want to set a watcher on the route - also: I think you would not await useQuery, just move on directly. Also, you don't use variables (instead, you re-build the query string) - that might be the root causse. (see formidable.com/open-source/urql/docs/basics/vue) as well Commented Nov 4, 2023 at 17:57
  • Thanks. Yeah, that's probably my issue: trying too hard to make it compact. Thanks, I have some more things to try. Commented Nov 4, 2023 at 18:37

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.