Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<div id="app">
<ApolloQuery
:query="GET_RESULTS"
:notifyOnNetworkStatusChange="true"
>
<template v-slot="{ result: { data, loading }, query }">
<AppNav @search="handleSearch($event, query)" />
<div class="content">
<div class="container">
<AppHeader @search="handleSearch($event, query)" />
<div class="main">
<Map :results="data && data.search && data.search.business" />
<Results
:results="data && data.search && data.search.business"
:loading="loading"
/>
</div>
</div>
</div>
</template>
</ApolloQuery>
</div>
</template>
<script>
import AppNav from '@/components/AppNav.vue'
import AppHeader from '@/components/AppHeader.vue'
import Map from '@/components/Map.vue'
import Results from '@/components/Results.vue'
import { GET_RESULTS } from './graphql/search.query';
export default {
name: 'App',
components: {
AppNav,
AppHeader,
Map,
Results
},
data() {
return {
GET_RESULTS
}
},
methods: {
handleSearch({ term, category }, query) {
query.refetch({term, category});
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.