0

I was looking for documentation of Graphql client Apollo, here I've got that the query is a string but inside backticks, what does the gql prefix means before the query string? My question is regarding the syntax

import { useQuery, gql } from '@apollo/client';

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

I've seen same type of syntax for styled components.

import { styled } from "@styles";

export const Content = styled.div`
  text-transform: none;
  font-size: ${props => props.theme.typography.h4FontSize};
  text-align: center;
  vertical-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
`;
Shahrear Bin Amin
  • 1,075
  • 13
  • 31

1 Answers1

1

This type of functions is called "tag functions". They are not magical, but certainly somewhat advanced.

There are also couple of native tag functions (like String.raw).

All tag functions only work with template strings.

Igor Bykov
  • 2,532
  • 3
  • 11
  • 19