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.
