I'm trying to build a vue app that searches through Spotify's API to find tracks. But I have a problem, it's saying :

Uncaught (in promise) TypeError: searchTracks is not a function

Whenever I called the searchTracks function. I looked for a solution but I can't seem to find it. I have the code to access Spotify's API (I'm still learning) on a different file (useSpotify.js)

import { ref } from 'vue'

const useSpotify = async () => {
    let token
    const id = 'MyId'
    const secretId = 'mySecretId'

    const res = await fetch('', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic ' + btoa(id + ':' + secretId)
        },
        body: 'grant_type=client_credentials'
    });

    token = await res.json();
    console.log(token);

    const searchTracks = async (searchTerm) => {
        console.log(token)
        const res = await fetch(`?${searchTerm}&type=track`, {
            method: 'GET',
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = ref(null)
        data.value = await res.json()
        console.log(data.value)

        return data.value
    }

    return { searchTracks }
}

export default useSpotify

And I'm calling it in the vue ponent just to try it (Login.vue) You can go to //searchTry to see the code done for this try

<template>
  <form @submit.prevent="handleLoginSubmit">
    <h3>Login</h3>
    <input type="email" placeholder="Email" v-model="email" />
    <input type="password" placeholder="Password" v-model="password" />
    <div class="error" v-if="error">{{error}}</div>
    <button v-if="!isPending">Login</button>
    <button v-if="isPending" disabled>Loading..</button>
  </form>
  <input type="text" v-model="searchTerm">
  <button @click="search">search</button>
</template>

<script>
import useLogin from "@/posables/useLogin";
import { ref } from '@vue/reactivity';
import { useRouter } from 'vue-router';
// searchTry
import useSpotify from '../../posables/spotifyApi/useSpotify'
// searchTry
export default {
  setup() {
    const {error, isPending, login} = useLogin()
    const router = useRouter()

    const email = ref('')
    const password = ref('')

    const handleLoginSubmit = async () =>{
      const res = await login(email.value, password.value)
      if(!error.value){
        router.push({name: 'UserPlaylists'})
      }
    }
    // search try
    const searchTerm = ref('')
    const {searchTracks} = useSpotify()
    const search = async () =>{
      const res = searchTracks(searchTerm.value)
    }
    // search try

    return{email, password, isPending, error, handleLoginSubmit, searchTerm, search}
  },
};
</script>

<style>

I'm trying to build a vue app that searches through Spotify's API to find tracks. But I have a problem, it's saying :

Uncaught (in promise) TypeError: searchTracks is not a function

Whenever I called the searchTracks function. I looked for a solution but I can't seem to find it. I have the code to access Spotify's API (I'm still learning) on a different file (useSpotify.js)

import { ref } from 'vue'

const useSpotify = async () => {
    let token
    const id = 'MyId'
    const secretId = 'mySecretId'

    const res = await fetch('https://accounts.spotify./api/token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic ' + btoa(id + ':' + secretId)
        },
        body: 'grant_type=client_credentials'
    });

    token = await res.json();
    console.log(token);

    const searchTracks = async (searchTerm) => {
        console.log(token)
        const res = await fetch(`https://api.spotify./v1/search?${searchTerm}&type=track`, {
            method: 'GET',
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = ref(null)
        data.value = await res.json()
        console.log(data.value)

        return data.value
    }

    return { searchTracks }
}

export default useSpotify

And I'm calling it in the vue ponent just to try it (Login.vue) You can go to //searchTry to see the code done for this try

<template>
  <form @submit.prevent="handleLoginSubmit">
    <h3>Login</h3>
    <input type="email" placeholder="Email" v-model="email" />
    <input type="password" placeholder="Password" v-model="password" />
    <div class="error" v-if="error">{{error}}</div>
    <button v-if="!isPending">Login</button>
    <button v-if="isPending" disabled>Loading..</button>
  </form>
  <input type="text" v-model="searchTerm">
  <button @click="search">search</button>
</template>

<script>
import useLogin from "@/posables/useLogin";
import { ref } from '@vue/reactivity';
import { useRouter } from 'vue-router';
// searchTry
import useSpotify from '../../posables/spotifyApi/useSpotify'
// searchTry
export default {
  setup() {
    const {error, isPending, login} = useLogin()
    const router = useRouter()

    const email = ref('')
    const password = ref('')

    const handleLoginSubmit = async () =>{
      const res = await login(email.value, password.value)
      if(!error.value){
        router.push({name: 'UserPlaylists'})
      }
    }
    // search try
    const searchTerm = ref('')
    const {searchTracks} = useSpotify()
    const search = async () =>{
      const res = searchTracks(searchTerm.value)
    }
    // search try

    return{email, password, isPending, error, handleLoginSubmit, searchTerm, search}
  },
};
</script>

<style>

• javascript
• api
• vue.js

• 3 useSpotify is async, but at const {searchTracks} = useSpotify() you are not awaiting its result. So searchTracks is most certainly undefined (and thus not a function). Either make the surrounding function async and use await useSpotify() or use promisechaining with useSpotify().then(result => ...) – derpirscher Commented Dec 1, 2021 at 13:27

1 Answer 1

You defined useSpotify as async function, you should use await or then() when you call it. Response of async function is always promise. docs

    useSpotify().then((result) => {
        const {searchTracks} = result
        // rest of your code
    })