GraphQL - Apollo - Certificate Flashcards
Which of these are benefits of schema-first design?
Schema-first design accelerates development by making teams more independent.
- reduce total development time
- it enables teams to work in parallel
Which of these accurately describes a graph?
The graph represents an app’s data points and how they’re connected as a collection of nodes and edges.
””” comment
Triple “double quotes” allow you to add line breaks for clearer formatting of lengthier comments.
What does graphql package?
The graphql package provides the core logic for parsing and validating GraphQL queries.
What does apollo-server package?
The apollo-server package provides a full-fledged, spec-compliant GraphQL server with some nice utilities like the gql template literal that we’ll use in a moment.
What is this gql ?
const { gql } = require(‘apollo-server’);
It’s a tagged template literal, used for wrapping GraphQL strings like the schema definition we’re about to write.
This converts GraphQL strings into the format that Apollo libraries expect when working with operations and schemas, and it also enables syntax highlighting.
Next, let’s declare a typeDefs (short for “type definitions”) constant, assigning the gql template where our definitions will go. While we’re at it, let’s export typeDefs now, because we’ll need it for our server file later on.
const typeDefs = gql` # Schema definitions go here `; module.exports = typeDefs;
What does an exclamation mark after a field’s type indicate?
An exclamation mark after a field’s type marks it as non-nullable.
What always true about the Query type?
The Query type’s fields define which data clients can query from our schema.
On the back-end side, our first goal is to create a GraphQL server that can…
- Receive an incoming GraphQL query from our client
- Validate that query against our newly created schema
- Populate the queried schema fields with mocked data
- Return the populated fields as a response
The Apollo Server library helps us implement this server quickly, painlessly, and in a production-ready way.
To enable basic mocked data, we could…
we could provide mocks:true to the ApolloServer constructor, like so:
const server = new ApolloServer({
typeDefs,
mocks: true,
});
Apollo Studio Explorer
To write our test query, we’ll use the Apollo Studio Explorer. The Explorer is free to use, and it provides awesome development features like interactive query building, query history, and response hints. This will make building our queries fast and fun.
Apollo Studio Explorer: Create Graph
Click Create Graph to create a new development graph that’s connected to your local server. A development graph is only accessible to you, and it stays updated with any changes you make to your server’s schema.
Apollo Client: 2 packages: graphql and @apollo/client
- graphql provides the core logic for parsing GraphQL queries.
- @apollo/client contains pretty much everything we need to build our client, including an in-memory cache, local state management, and error handling.
ApolloClient
ApolloClient is the class that represents Apollo Client itself. We create a new client instance like so:
const client = new ApolloClient({
// options go here
});
We need to provide a couple of options to the constructor. The first is the uri option, which we use to specify the location of our GraphQL server. Our server is running locally at localhost:4000, so the uri option looks like this:
uri: ‘http://localhost:4000’,
Second, every instance of ApolloClient uses an in-memory cache. This enables it to store and reuse query results so it doesn’t have to make as many network requests. This makes our app’s user experience feel much snappier.
We provide an InMemoryCache instance in the cache option, like so:
cache: new InMemoryCache(),
Final result:
const client = new ApolloClient({
uri: 'http://localhost:4000',
cache: new InMemoryCache(),
});
how do we make client available to the components in our React app?
ApolloProvider
Using ApolloProvider is a convenient way to make Apollo Client available everywhere it’s needed
ApolloProvider
The ApolloProvider component uses React’s Context API to make a configured Apollo Client instance available throughout a React component tree. To use it, we wrap our app’s top-level components in the ApolloProvider component and pass it our client instance as a prop:
ReactDOM.render(
,
document.getElementById(‘root’),
);
useQuery React hook
The useQuery React hook is the primary API for executing queries in an Apollo application. We run a query within a React component by calling useQuery and passing it our GraphQL query string. This makes running queries from React components a breeze.
When our component renders, useQuery returns an object from Apollo Client that contains loading, error, and data properties that we can use to render our UI.
How do we execute queries in our front-end app?
Pass your query to the hook useQuery and render the response with loading, error and data properties.
How does our Catstronauts client send queries to our GraphQL server?
Most GraphQL clients send queries in HTTP POST or GET requests. The query itself is formatted as a string.
Which of these are actions that our GraphQL server takes when it receives a request?
When our server receives the HTTP request, it first extracts the query string.
It parses and transforms it into something it can better manipulate: a tree-structured document called an AST (Abstract Syntax Tree).
With this AST, the server validates the query against the types and fields in our schema.
If anything is off (e.g. a requested field is not defined in the schema or the query is malformed), the server throws an error and sends it right back to the app.
Which of these are situations where our GraphQL server will throw an error?
Queries must use valid GraphQL syntax and must only include schema-defined fields.
Which of these are responsibilities of a resolver function?
A resolver function is responsible for populating the data for a single field in your schema (from database or REST API)
When a query executes successfully, which of these is included in the object returned by the GraphQL server?
A successful query’s result always matches the query’s shape.
What is data sources?
The data that resolvers retrieve can come from all kinds of places: a database, a third-party API, webhooks, and so on. These are called data sources. The beauty of GraphQL is that you can mix any number of data sources to create an API that serves the needs of your client app.
