How to integrate Apollo with NativeScript vue?

I used cem kaan's answer to make it work - so thank you for that.

However, in my case it needed some adjustments. To make it easier for everyone, I'll describe what exactly I did (excluding all my fixed mistakes, of course :D ) which takes a while. Points 1, 5, 6, 7 and 10 mainly base on cem's own answer. The other ones are either new or heavily adjusted due to changes in the way apollo is included.

Side note: I use typescript, so if you use javascript, you might have to adapt it a little more and use .js files instead of .ts files.

Setting up NativeScript-vue with GraphQL / Apollo

1. Open the terminal in your project and install apollo-boost by entering one of these two commands

   - yarn add vue-apollo apollo-boost graphql
   
   - npm i vue-apollo apollo-boost graphql
   

2. (Optional for quick testing) Create a new file called in your project root called ".graphqlconfig"

3. (Optional for quick testing) Open the file and paste this + adapt it according to your personal endpoints

          {
            "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
                }
              }
            }
          }

4. I use vscode and have installed the plugins ApolloGraphQL and GraphQL to simplify working with graphql.

5. Create a new folder called "graphql"

6. Create a new file in there called "queries.ts"

7. Add your queries. The file could look like this:

        import { gql } from "apollo-boost";
        export const GET_ITEMS = gql`
        query GetItemsQuery {
            getItems {
              id, name, image
            }
        }
        `;

8. If you installed the plugins as stated in 4, you'll be able to directly try and execute the queries inside the queries.ts file.

9. Now open your main.ts and add the following lines

        // [...] 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()

10. In your *.vue file (my path: project/app/components) include the query for example like this list, first in the template section:

        <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>

11. Finally, in the script section, add this

        <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>

12. Try out and hopefully you are happy that it works perfectly fine :)

Please remember: The paths also might have to be adjusted to your personal solution.

I hope this helps someone :)

Plugins work as in any other NativeScript app, but you may wonder how UI plugins work with Vue.

UI plugins work almost identically to how you'd use a NativeScript UI plugin in an Angular app.

According to the document's description plugins might work out-of-box expect for UI components which we have to register. I personally did use not vue-apollo but i hoping to work in nativescript-vue.