3

I'm learning Apollo client with VueJs (Composition API syntax), I got a query that searches a user by the name field, and What I'm trying to do is to trigger the fetch with a @click event on a button next to an input in which you should write the user's name. So basically I'm trying to use useLazyQuery and pass the name prop as param in the query but I don't know how to do it.

<div class="selectedUser">
<template>
  <div class="container">
      <input 
        type="text"
        placeholder="Brian..."
        v-model="userSearched"
         />
         <p>{{userSearched}}</p>

         <button
           @click="load()">
         Search for a user
         </button>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, reactive, toRefs } from 'vue';
import { useLazyQuery, useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag';

export default defineComponent({
  name: 'HomeView',
  setup(){
const GET_USER_BY_NAME = gql`
      query getUser($name: String!){
        user(name: $name) {
          id
          name
          age
          username
          nationality
      }
    },
    `
const state = reactive({
      userSearched : ''
    });

     const {
        result: userSearhedResult,
        load      
        } = useLazyQuery(GET_USER_BY_NAME);
 
    
    ` return {
        users,
        error,
        loading,
        load, 
        ...toRefs(state)
       }
  }});
</script>

As you can see, my idea is/was to use the userSearched from the reactive() as param, but I'm not doing it right. Hope you share with me the correct way to do it. Thanks

H3AR7B3A7
  • 4,366
  • 2
  • 14
  • 37
Tomas Gil Amoedo
  • 537
  • 3
  • 16

0 Answers0