User Document

GraphQL is an open source query language that describes how a client should request information through an APIs (Application Programming Interfaces). It empowers clients to efficiently request and retrieve precisely the data they need from a server.

Unlike traditional RESTful APIs, which often provide fixed and inflexible data structures, GraphQL allows clients to define their data requirements, specifying the exact fields and relationships they want, all in a single, flexible request.

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

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

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

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

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

4. Create a folder in root as per requirement

• apollo/queries

• apollo/subscriptions

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

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

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

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

7. Use the query in the format below -

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

8. 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 🙂