{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/graphql-concepts-explained-query/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n

There are three types of GraphQL operations: query, mutation & subscription.

\n

A query describes the data you want to fetch from a GraphQL server. It is written using the GraphQL query language and is sent to the server as a string inside a JSON object.

\n

Syntax

\n\n
{\n  user {\n   firstName\n   age\n  }\n}
\n\n
query {\n  user {\n    firstName\n    age\n  }\n}
\n\n
query fetchUsers {\n   user {\n     firstName\n     age\n   }\n}
\n

Selection set

\n

When we write a query, we select the fields we need by encapsulating them in curly braces. These blocks are referred to as selection sets.

\n

\n \n \n \n \n

\n

We define fragments by using the fragment keyword followed by the name of the fragment. Fragments are selection sets on specific types. Therefore, in the definition, we must also specify the type associated with the fragment.

\n
query fetchUsers {\n    user (id: "40") {\n        ...userDetails\n    }\n}\n\nfragment userDetails on User {\n    firstName\n    age\n}
\n

Above, the fragment is a selection set on the User type.

\n

We can add a fragment in another selection set by using three dots(...) followed by the name of the fragment (line 3). The three dots instruct GraphQL to assign the fields from the fragment to the current selection set.

\n

The syntax is similar to the JavaScript spread operator.

\n
\n

Want to learn how to build an Express/GraphQL server?

\n

Check out my 8-part blog series here.

\n","frontmatter":{"title":"GraphQL Concepts Explained - Query","date":"2021-06-12"}}},"pageContext":{"slug":"/graphql-concepts-explained-query/","prev":{"fields":{"slug":"/using-css-selectors-combinators/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/how-to-create-a-hamburger-menu-using-gsap-and-react/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}