This code is copied form emacs stack-exchange and adopted to work with web-mode for future reference.
Following is the link to the original stack exchange post:
step1: Install the packages
M-x package-install RET graphql-mode
M-x package-install RET mmm-mode
step2 : Put this in your config
;; Graphql
(require 'graphql-mode)
(require 'mmm-mode)
(mmm-add-classes
'((js-graphql
:submode graphql-mode
:face mmm-declaration-submode-face
:front "[^a-zA-Z]gql`" ;; regex to find the opening tag
:back "`"))) ;; regex to find the closing tag
;; mode in the next line can be any major mode that you use for the particular file
;; The original answer from stackexchanged had js-mode,
;; I have replaced it with web-mode is that's what I use
(mmm-add-mode-ext-class 'web-mode nil 'js-graphql)
(setq mmm-global-mode 'maybe)
;; Optional configuration that hides the background color for a highlighted block
;; I find it useful for debugging emacs, but when actually coding I dont want so much emphasis on submodes
(setq mmm-submode-decoration-level 0)