Как загрузить запрос из файла .graphql с помощью angular и typcript - PullRequest
Новая
       51

Как загрузить запрос из файла .graphql с помощью angular и typcript

0 голосов
/ 01 ноября 2019

Я работаю над приложением с Angular и Ionic. В качестве бэкэнда у меня есть сервер узлов, на котором запущен ApolloServer с Neo4j (используется grandstarter.io). На стороне клиента у меня в настоящее время есть файл под названием query.ts, в котором я определил свои запросы graphql следующим образом: 

supplierByName = (value) => {
    const query = gql`
    {
        Supplier(filter: {name: "${value}"}) {
            name
        }
    }
    `;

    return query;
};

Я использую apollo, поэтому я делаю так, чтобы выполнить свой запрос graphql 

this.apollo.query({
                query: this.queries.supplierByName(supplierName)
            })
            .subscribe(....)

Теперь, из-за того, что мне не нравятся мои запросы к graphql в виде строк, я бы хотел, чтобы мои запросы были непосредственно в файле .graphql. Лучше использовать инструмент при работе непосредственно в файле graphql, и, честно говоря, в основном потому, что запросы прямо сейчас болят мне глаза:)

Мне бы хотелось, чтобы это было так (file: query.graphql): 

query supplierByName($value: String) {
 Supplier(filter: { name: "$value}" }) {
    name
 }
}

затем, когда я выполняю запрос graphql с Apollo, я хотел бы сделать что-то вроде этого: 

 import supplierByName from './queries.graphql'
 .....
 this.apollo.query({
                query: supplierByName(supplierName)
            })
            .subscribe(....)

и использовать его с apollo каким-то простым способом. Я посмотрел на этот ответ, но из того, что я могу собрать, он имеет отношение к ApolloServer. Я хочу просто разобрать запросы graphql на клиенте. Я нашел эту статью, которая приблизилась к тому, что мне нужно, но также имеет отношение к ApolloServer. Я использую Angular 8.1.2

. Все примеры в документации Apollo с angular показывают примеры того, как я в настоящее время строил свои запросы со строками и с использованием gql (graphql-tag).

1 Ответ

2 голосов
/ 07 ноября 2019

Сначала добавьте загрузчик веб-пакетов в конфигурацию веб-пакета в соответствии с документом apollo . 

loaders: [
  {
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader'
  }
]

Вы не должны использовать двойные кавычки в файле .graphql для переменных. Таким образом, ваш query.graphql должен быть таким: 

query supplierByName($value: String) {
 Supplier(filter: { name: $value }) {
    name
 }
}

И последнее, что вы должны передать переменные в ваш запрос следующим образом: 

import supplierByName from './queries.graphql'
 .....
 this.apollo.query({
  query: supplierByName,
  variables: {
    value: supplierName, // your value
  }
})
  .subscribe(....)
...