API витрины: запрос переменных параметров?
Shopify Примеры API витрины показывает представление App.js, в котором перечислены все продукты на одной странице. В этих примерах продукты добавляются в корзину с этой индексной страницы, а страница с подробными сведениями о продукте отсутствует. В отличие от примеров, я хочу перейти на страницу сведений о продукте из индекса продуктов.
Индекс продуктов был легким. Но у меня много проблем с пониманием того, как создать страницу для каждого продукта.
Кажется, я не могу использовать запрос graphql с переменной в Shopify Storefront. Например, это не удается:
query myQuery($id: ID!) {
Product(id: $id) {
id
title
}
}
Я использую nuxt и vue-apollo для создания интерфейса.
Любые указатели приветствуются.
Ответы 1
В предоставленном вами запросе отсутствует фактическое значение переменной, которую вы запрашиваете.
Тело HTTP-запроса к конечной точке GraphQL должно выглядеть так:
query:"query myQuery($id: ID!) {
Product(id: $id) {
id
title
}
}"
variables:{id: "ce03707f-971e-4c64-853c-06a8c2e21448"}
Обновлено: конкретный пример Vue:
// Apollo-specific options
apollo: {
// Query with parameters
ping: {
// gql query
query: gql`query PingMessage($message: String!) {
ping(message: $message)
}`,
// Static parameters
variables: {
message: 'Meow',
},
},
},
от: https://akryum.github.io/vue-apollo/guide/apollo/queries.html#query-with-parameters
Как, черт возьми, один код форматирования здесь, в stackoverflow? ?
@CallumFlack почти готов, я обновил свой комментарий о том, как вы это сделаете в Vue
Спасибо @RozenMD. Затем мне нужно будет динамически определить переменную id для продукта на основе идентификатора маршрута. Что-то вроде этого, я полагаю?
export default { apollo: { myQuery: { query: myQuery, prefetch: ({ route }) => { return { id: route.params.id } }, variables: { return { id: this.id } } } } }