More Apollo learning

This commit is contained in:
Thomas Bishop 2022-11-15 08:02:15 +00:00
parent 05a6d17a8e
commit cc2e1be377
4 changed files with 45 additions and 1 deletions

View file

@ -20,7 +20,7 @@ const client = new ApolloClient({
});
```
> The uri property must match the location of our Apollo server.
> The `uri` property must match the location of our Apollo server.
## Utilising the provider
@ -62,6 +62,7 @@ const TRACKS = gql`
```
The convention is to name the query constant in `ALL_CAPS`.
> Note that the name of the query on the client doesn't have to match the query type defined in the schema however it should reference it on the second line (`tracksFormHome)
### `useQuery` hook
@ -86,3 +87,4 @@ const Tracks = () => {
- We destructure the `loading, error, data` variables that are returned from the hook
- We pass in our query constant as an argument.
- In the example we just render the serialized data but we could of course pass the data as a prop and map through it in an embedded child component.

View file

@ -111,3 +111,35 @@ const mocks = {
const server = new ApolloServer({ typeDefs, mocks });
```
We can now [run queries](/Databases/GraphQL/Apollo/Apollo_Client.md#running-a-query) against our server.
## Implementing resolvers
A resolver is a [function](/Databases/GraphQL/Creating_a_GraphQL_server.md#resolvers)
### `RESTDataSource`
This is something you can apply to your server to improve the efficiency of working with REST APIs in your resolvers.
REST APIs fall victim to the "n + 1" problem: say you want to get one resource, then for each element returned of this resource you need to send another request using a property of this resource to get another resource. For each of the first requests you need to send another request once they resolve.
Here is an example of `RESTDataSource` being used. It is just a class that can be extended and which provides inbuilt methods for running fetches against a REST API:
```js
const {RESTDataSource} = require('apollo-datasource-rest');
class TrackAPI extends RESTDataSource {
constructor() {
super();
this.baseURL = 'https://odyssey-lift-off-rest-api.herokuapp.com/';
}
getTracksForHome() {
return this.get('tracks');
}
getAuthor(authorId) {
return this.get(`author/${authorId}`);
}
}
```

View file

@ -50,6 +50,7 @@ app.use(
## Resolvers
We will specify our resolvers in a dedicate resolver file. In GraphQL you need to define resolvers for both your queries and your mutations.
To achieve this we will have a dummy object as the database containing our products and a class working as a generator function that will create a product object with certain properties, individuated by an id. We will invoke this class to create new products for the database and to retrieve existing products from the database.

View file

@ -0,0 +1,9 @@
---
categories:
- Databases
tags: [graph-ql]
---
# The journey of a GraphQL query
![](/img/graphql-journey-two.svg)