如何将Apollo与NativeScript vue集成? [英] How to integrate Apollo with NativeScript vue?

问题描述

如何针对 nativescript-vue 进行修改?

vue-apollo 包应直接起作用吗? 甚至还有带角度的阿波罗"的一些例子.但不幸的是，我找不到有关nativescript-vue的说明. @ khalifa-gad 说它在nativescript内核中正常工作.但是它也可以与nativescript-vue一起使用吗?

Should vue-apollo package work directly? There are even some examples of "apollo with angular". But unfortunately I couldn't find instruction for nativescript-vue. @khalifa-gad said it works fine with nativescript core. But does it work also with nativescript-vue?

import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
import { ApolloModule, Apollo } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptHttpClientModule, // this provides HttpClient
    ApolloModule,
    HttpLinkModule
  ]
})
export class AppModule {
  constructor(
    apollo: Apollo,
    httpLink: HttpLink
  ) {
    // create Apollo
    apollo.create({
      link: httpLink.create({ uri }),
      // other options like cache
    });
  }
}

推荐答案

最近2个月我一直在将Vue-apollo与nativescript-vue结合使用.

I have been using Vue-apollo with nativescript-vue last 2 months.

1. 使用vue-apollo手动安装 yarn add vue-apollo graphql apollo-boost
2. 创建apollo.config.js文件
3. 将阿波罗代码添加到您的main.ts文件中

1. Use vue-apollo manual installation yarn add vue-apollo graphql apollo-boost
2. Create apollo.config.jsfile
3. add apollo code to your main.ts file

import Vue from 'nativescript-vue'
import List from './components/List.vue'
import Login from './components/Login.vue'
import * as ApplicationSettings from "tns-core-modules/application-settings";
import VueDevtools from 'nativescript-vue-devtools'
import VueApollo from "vue-apollo";
import {
    ApolloClient,
    InMemoryCache,
    HttpLink,
    ApolloLink
} from "apollo-boost";
import { onError } from "apollo-link-error";
import { setContext } from "apollo-link-context";
/////////////// APOLLO
Vue.use(VueApollo);
const errorLink = onError(({ graphQLErrors }) => {
    if (graphQLErrors) graphQLErrors.map(({ message }) => console.log(message));
});
const httpLink = new HttpLink({
    uri: "https://polar-badlands-01357.herokuapp.com/graphql"
});
const authLink = setContext((_, { headers }) => {
    // get the authentication token from ApplicationSettings if it exists
    var tokenInAppSettings = ApplicationSettings.getString("token");
    // return the headers to the context so HTTP link can read them
    return {
        headers: {
            ...headers,
            authorization: tokenInAppSettings
                ? `Bearer ${tokenInAppSettings}`
                : null
        }
    };
});
export const apolloClient = new ApolloClient({
    link: ApolloLink.from([errorLink, authLink, httpLink]),
    cache: new InMemoryCache()
});

const apolloProvider = new VueApollo({
    defaultClient: apolloClient
});


if(TNS_ENV !== 'production') {
  Vue.use(VueDevtools)
}
import store from './store'

// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = true

new Vue({
  store,
  apolloProvider,
  render: h => h("frame", [h(ApplicationSettings.hasKey("token")? List : Login)])
}).$start()

如果有人有兴趣，请登录并检查完整的Github存储库.变异示例.

If someone is interested please check this complete Github repo with login and mutation examples.

对于完整的经过测试的nativescript-vue插件数据库，请查看插件页面

And for a complete tested nativescript-vue plugin database check out plug-in page

这篇关于如何将Apollo与NativeScript vue集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！