我使用了 cem kaan 的答案来使它工作 - 所以谢谢你。
但是，就我而言，它需要一些调整。为了让每个人都更容易，我将描述我到底做了什么（当然不包括我所有的固定错误：D），这需要一段时间。第1、5、6、7和10点主要基于cem自己的答案。由于包含阿波罗的方式发生了变化，其他的要么是新的，要么是经过大量调整的。
旁注：我使用 typescript，所以如果您使用 javascript，您可能需要对其进行更多调整并使用 .js 文件而不是 .ts 文件。
使用 GraphQL / Apollo 设置 NativeScript-vue
-
在您的项目中打开终端并通过输入这两个命令之一来安装 apollo-boost
- yarn add vue-apollo apollo-boost graphql
- npm i vue-apollo apollo-boost graphql
-
（快速测试可选）在项目根目录中创建一个名为“.graphqlconfig”的新文件
-
（快速测试可选）打开文件并粘贴此文件并根据您的个人端点进行调整
{
"name": "Your Schema",
"schemaPath": "https://your.url.com/graphql",
"extensions": {
"endpoints": {
"Default GraphQL Endpoint": {
"url": "https://your.url.com/graphql",
"headers": {
"user-agent": "TS GraphQL"
},
"introspect": false
}
}
}
}
-
我使用 vscode 并安装了插件 ApolloGraphQL 和 GraphQL 来简化使用 graphql。
-
创建一个名为“graphql”的新文件夹
-
在那里创建一个名为“queries.ts”的新文件
-
添加您的查询。该文件可能如下所示：
import { gql } from "apollo-boost";
export const GET_ITEMS = gql`
query GetItemsQuery {
getItems {
id, name, image
}
}
`;
-
如果您按照 4 中所述安装了插件，您将能够直接尝试并执行 queries.ts 文件中的查询。
-
现在打开你的 main.ts 并添加以下行
// [...] imagine here your other imports like nativescript-vue or devtools
import ApolloClient from "apollo-boost"
import VueApollo from "vue-apollo"
const apolloProvider = new VueApollo({
defaultClient: new ApolloClient({
uri: "https://your.url.com/graphql"
})
})
Vue.use(VueApollo)
// [...] your other stuff like DevTool use or configuration
new Vue({
provide: apolloProvider.provide(),
render: h => h('frame', [h(App)])
}).$start()
- 在您的 *.vue 文件（我的路径：project/app/components）中包含查询，例如这个列表，首先在模板部分：
<template>
// [...] if this is not an imported component, here could be <Page> etc
<GridLayout columns="*" rows="*,30">
<Label v-if="$apollo.loading" text="loading ... " textWrap="true" row="0" col="0" />
<GridLayout v-else rows="*" columns="*" row="0" col="0">
<ListView for="item in getItems" row="0" col="0">
<v-template>
<Label :text="item.name"/>
</v-template>
</ListView>
</GridLayout>
</GridLayout>
// [...] possibly other stuff
</template>
- 最后，在脚本部分，添加这个
<script lang="ts">
import Vue from "vue";
import { gql } from "apollo-boost";
import * as queries from "../../graphql/queries";
import * as ApplicationSettings from "tns-core-modules/application-settings";
export default {
data() {
return {
getItems: [],
};
},
apollo: {
getItems: {
// prefetch: true,
query: queries.GET_ITEMS,
update({ getItems }) {
return getItems;
}
}
}
}
</script>
- 尝试一下，希望您对它运行良好感到满意 :)
请记住：路径也可能需要根据您的个人解决方案进行调整。
我希望这对某人有帮助:)