Search code examples
reactjsgraphqlapolloapollo-clientreact-apollo

Apollo GraphQL Queries in React Apps

Hey I am just starting to learn GraphQL for React, and Full Stack Applications and looking at Apollo and wondering why in my React.js I would right a query in graphqls query language instead of the json format?

Example Apollo React wants

query: gql`
      query GetRates {
        rates(currency: "USD") {
          currency
        }
      }
    `

but on the server, you can write

{
  books {
    title
    author
  }
}

Why can't I write the second in my React application? Am I missing something, is there a better React GraphQL client to use?

Solution

  • See GraphQL docs.

    The following is a shorthand where you omit both the query keyword and the query name:

    {
  books {
    title
    author
  }
}

    It is the same as:

    query getBooks {
  books {
    title
    author
  }
}

    gql from apollo-client employs additional logic to parse GraphQL strings. Think about query parameters for example.