How to use the graphql-tag function in graphql-tag

protected _gql(node: FragmentDefinitionNode | OperationDefinitionNode): string {
    const doc = this._prepareDocument(`
    ${
      print(node)
        .split('\\')
        .join('\\\\') /* Re-escape escaped values in GraphQL syntax */
    }
    ${this._includeFragments(this._transformFragments(node))}`);

    if (this.config.documentMode === DocumentMode.documentNode) {
      const gqlObj = gqlTag(doc);

      if (gqlObj && gqlObj['loc']) {
        delete gqlObj.loc;
      }

      return JSON.stringify(gqlObj);
    } else if (this.config.documentMode === DocumentMode.string) {
      return '`' + doc + '`';
    }

    return 'gql`' + doc + '`';
  }

// get pipeline expanding config from localStorage
    const expandConfig = this.getConfig();

    const extendedProps = {
      ...this.props,
      stages: this.state.stages,
      isExpanded: expandConfig[index],
      onToggle: value => this.setConfig(value)
    };

    return ;
  }
}

const PipelineContainerWithData = compose(
  graphql(gql(mutations.stagesUpdateOrder), {
    name: 'stagesUpdateOrderMutation'
  }),
  graphql(gql(mutations.stagesChange), {
    name: 'stagesChangeMutation'
  })
)(PipelineContainer);

class StagesWithPipeline extends React.Component<{ stagesQuery: any }> {
  render() {
    const { stagesQuery } = this.props;

    if (stagesQuery.loading) {
      return ;
    }

    const stages = stagesQuery.dealStages;

beforeAll(() => {
    hermes = new Hermes(new CacheContext(strictConfig));
    hermes.writeQuery({
      query: gql(`
        query getViewer($city: String!, $area: String!) {
          viewer {
            id
            name
            __typename
            shipments(destination: $city) {
              id
              __typename
              address {
                street
                postal
              }
              shipper(operation: $area) {
                id
                __typename
              }

const buildNumber = DeviceInfo.getBuildNumber()

    useEffect(() => {
        getFileList().then(fileList => {
            setFiles(JSON.stringify(fileList, null, 2))
        })
    }, [])

    useEffect(() => {
        getPushTracking().then(pushTracking => {
            pushTracking && setPushTrackingInfo(pushTracking)
        })
    }, [])

    const query = useQuery<{ [key: string]: unknown }>(
        gql(`{ ${ALL_SETTINGS_FRAGMENT} }`),
    )
    if (query.loading) return null
    const { data, client } = query
    const { apiUrl } = data
    if (typeof apiUrl !== 'string') throw new Error('expected string')

    return (
        <>
            🦆 SECRET DUCK MENU 🦆
            <footer>
                
                    Only wander here if you know what you are doing!!
                
            </footer>

}
      `,
      { name: 'gmailAuthUrlQuery' }
    ),
    graphql<
      Props,
      LinkTwitterMutationResponse,
      { queryParams: TwitterAuthParams }
    >(gql(mutations.linkTwitterAccount), {
      name: 'accountsAddTwitter',
      options: {
        refetchQueries: ['accounts']
      }
    }),
    graphql(
      gql(mutations.linkGmailAccount),
      {
        name: 'accountsAddGmail',
        options: {
          refetchQueries: ['accounts']
        }
      }
    )
  )(ListContainer)
);

type: ACTION_SET_SUB_PRODUCT_ID,
      subProductId,
      attributeValueIds
    });
  },
  setAttributeValueIds: (attributeValueIds: number[]) => {
    dispatch({ type: ACTION_SET_ATTRIBUTE_VALUE_IDS, attributeValueIds });
  },
  unselectAll: () => {
    dispatch({
      type: ACTION_RESET
    });
  }
});

const PRODUCT_QUERY = gql(require("./product.gql"));
const productOptions: OperationOption = {
  name: "dataProduct",
  options: props => ({
    variables: {
      id: props.match.params.id
    }
  })
};

const cartOptions: OperationOption = {
  name: "dataCart"
};

export default compose(
  connect(
    mapStateToProps,

const getRefetchQueries = (type: string) => {
  return [
    {
      query: gql(queries.tags),
      variables: { type }
    }
  ];
};

{
      name: 'addMutation',
      options: commonOptions()
    }
  ),

  gqlEditMutation: graphql<{}, UsersGroupsEditMutation>(
    gql(mutations.usersGroupsEdit),
    {
      name: 'editMutation',
      options: commonOptions()
    }
  ),

  gqlRemoveMutation: graphql<{}, UsersGroupsRemoveMutation>(
    gql(mutations.usersGroupsRemove),
    {
      name: 'removeMutation',
      options: commonOptions()
    }
  ),

  ListComponent: GroupList
});

}
`;

export const updateAppGitOpsRaw = `
  mutation updateAppGitOps($appId: String!, $clusterId: String!, $gitOpsInput: KotsGitOpsInput!) {
    updateAppGitOps(appId: $appId, clusterId: $clusterId, gitOpsInput: $gitOpsInput)
  }
`;
export const updateAppGitOps = gql(updateAppGitOpsRaw);

export const resetGitOpsDataRaw = `
  mutation resetGitOpsData {
    resetGitOpsData
  }
`;
export const resetGitOpsData = gql(resetGitOpsDataRaw);

export const setPrometheusAddress = gql`
  mutation setPrometheusAddress($value: String!) {
    setPrometheusAddress(value: $value)
  }
`;

export const testGitOpsConnectionRaw = `
  mutation testGitOpsConnection($appId: String!, $clusterId: String!) {
    testGitOpsConnection(appId: $appId, clusterId: $clusterId)
  }
`;
export const testGitOpsConnection = gql(testGitOpsConnectionRaw);

export const disableAppGitopsRaw = `
  mutation disableAppGitops($appId: String!, $clusterId: String!) {