Skip to main content
Skip table of contents

User Document

Prerequisites / Requirements –

  1. We are using Apollo for interacting with GraphQL

  2. GraphlQL server is hosted on device cloud server

 

Steps to check and use GraphQL in project :-

  1. Go to Device cloud server

  2. Click on SETTINGS BUTTON on top left and set the headers with the values

    1. Authorization

    2. Key

  3. Try this query to see if it is working or not

JS
query UserQuery {
  userQuery {
    data {
      id
      firstname
    }
  }
}
  1. Look for output

 

In Apollo, we have three possibilities of interacting with data :-

  • Query

  • Mutation

  • Subscription


In the code :-

  1. Install npm packages

  2. nuxt/apollo

  3. graphql-tag

  1. Go to constants.js file and add GraphQL URL

  1. Create apollo.js file in root directory and add Client configuration, Authentication information

JS
import { GRAPHQL_URL, GRAPHQL_WS } from './constants.js';

export default {                
            clientConfigs: {            
            default: {
              httpEndpoint: GRAPHQL_URL,
              tokenName: 'token-name',
              persisting: false,
            },
          },          
          authenticationType: 'autenticate-type',       
          tokenName: 'token-name',      
          includeNodeModules: true,          
        }

  1. Create a folder in root as per requirement

  • apollo/queries

  • apollo/subscriptions

  1. Create a file under queries folder, for example - devices.gql and paster graphlQL code in it.

JS
query DeviceInstanceQuery {
  deviceInstanceQuery {
    data {
      id
      kpi
      name
    }
  }
}

6, Import the GraphQL query in whichever file we use it

JS
import deviceInstanceQuery from '~/apollo/queries/devices/devices'

  1. Use the query in the format below -

JS
this.devices = (await this.$apollo.query({
                query: deviceInstanceQuery,
                variables: {
                            "deviceInstanceWhere": {
                                "regStatusId": {
                                "gt": 4
                                },
                                "hidden": false
                            }
                            }
                })).data.deviceInstanceQuery.data

  1. Test the output of the query using console.log and we are done

Tip : Vuejs chrome extension can also be installed to debug the Vue components easily

Happy Coding 🙂

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.