Skip to content
This repository has been archived by the owner on Oct 30, 2024. It is now read-only.

Commit

Permalink
adjust VSCode configuration docs
Browse files Browse the repository at this point in the history
  • Loading branch information
phryneas committed Jul 29, 2024
1 parent 1d3216a commit cc13ed0
Showing 1 changed file with 18 additions and 112 deletions.
130 changes: 18 additions & 112 deletions src/content/basics/devtools/apollo-config.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
---
title: Configuring Apollo projects
description: How to configure Apollo VS Code and CLI with apollo.config.js
title: Configuring Apollo VS Code
description: How to configure Apollo VS Code with apollo.config.js
---

Apollo projects are configured using an `apollo.config.js` file at the root of your project. Many Apollo tools leverage your Apollo config, reducing the net amount of configuration you need to do in your project in the end.
If you're using the [Apollo VS Code extension](./editor-plugins/), you'll need to have an `apollo.config.js` (alternative file extensions: `cjs`, `mjs` and `ts`) project to get the features those tools bring.

If you're using one of our workflow tools like the [Apollo CLI](./cli/) or the [Apollo VS Code extension](./editor-plugins/), you'll need to have an `apollo.config.js` project to get the features those tools bring.

There are two types of projects, `client` and `service`. When a `client` key is found in the config, a project is treated as a client project, and only `client:*` commands may be run against it. The same is true for `service` projects. The `apollo.config.js` file is meant to describe configuration for a single project only. If used in a monorepo with multiple projects, there should be a separate config file for each project.
The `apollo.config.js` file is meant to describe configuration for a single project only. If used in a monorepo with multiple projects, there should be a separate config file for each project.

This document describes all the options available in the Apollo config and defines which are required versus optional.

Expand Down Expand Up @@ -40,8 +38,8 @@ With GraphOS Studio set up, you can point your client directly to your graph's s
```js {3}
module.exports = {
client: {
service: 'my-apollo-service' // the name of your graph in Studio
}
service: "my-apollo-service", // the name of your graph in Studio
},
};
```

Expand All @@ -56,8 +54,8 @@ If you're tracking different versions of your schema in the registry using graph
```js {3}
module.exports = {
client: {
service: 'my-apollo-service@staging' // "staging" is the graph variant we're using
}
service: "my-apollo-service@staging", // "staging" is the graph variant we're using
},
};
```

Expand All @@ -71,16 +69,16 @@ Remote endpoints can be used to pull down a schema from a running service. This
module.exports = {
client: {
service: {
name: 'github',
url: 'https://api.github.com/graphql',
name: "github",
url: "https://api.github.com/graphql",
// optional headers
headers: {
authorization: 'Bearer lkjfalkfjadkfjeopknavadf'
authorization: "Bearer lkjfalkfjadkfjeopknavadf",
},
// optionally turn off SSL validation check
skipSSLValidation: true
}
}
skipSSLValidation: true,
},
},
};
```

Expand All @@ -92,10 +90,10 @@ In some cases you may have a locally generated file with your schema that you wa
module.exports = {
client: {
service: {
name: 'my-service-name',
localSchemaFile: './path/to/schema.graphql'
}
}
name: "my-service-name",
localSchemaFile: "./path/to/schema.graphql",
},
},
};
```

Expand Down Expand Up @@ -143,95 +141,3 @@ module.exports = {
}
};
```

### `client.addTypename`

_Optional_ - Apollo will by default add the `__typename` field to all your operations automatically and to all your generated types during codegen.

GraphQL clients like Apollo Client often add the `__typename` field to operations automatically when they're sent over the wire. This can come in really handy for things like caching, but it can be turned off by adding `addTypename: false` to the client config:

```js
module.exports = {
client: {
addTypename: false, // highlight-line
service: ...
}
};
```

<Tip>

For consistency, we recommend that you keep this option consistent with how your `ApolloClient` is configured.

</Tip>

### `client.clientOnlyDirectives`, `client.clientSchemaDirectives`

_Optional_ - By default, Apollo projects support the following client-side directives:

- `@client` for local state
- `@rest` for using `apollo-link-rest`
- `@connection` for custom pagination with Apollo Client
- `@type` for dynamic type names with `apollo-link-rest`

Client side applications can use custom directives on their queries that aren't meant to be sent to the server. Configuration of client side directives beyond the defaults listed above can be set up like so:

```js {3-4}
module.exports = {
client: {
clientOnlyDirectives: ["connection", "type"],
clientSchemaDirectives: ["client", "rest"],
service: ...
}
};
```

`clientOnlyDirectives` are directives that should be stripped out of the operation before being sent to the server. An example of this is the `@connection` directive.

`clientSchemaDirectives` are directives that indicate a portion of the operation that is not meant to be sent to the server. These directives are removed as well as the fields they are placed on. An example of this type of directive is the `@client` directive.

## Server projects

Server projects are configured through a top level `service` key in the config.

```js
module.exports = {
service: { ... }, // highlight-line
};
```

Defining a `service` key in your Apollo config will provide the Apollo CLI with the information it needs to perform commands like `apollo service:push` and `apollo service:check`. You can set up the schema for your service to load in one of two ways:

1. Using a remote endpoint
1. Using a local schema file

#### Option 1: Remote endpoint

Remote endpoints can be used to pull down a schema from a running service. This can be configured like so:

```js {2-10}
module.exports = {
service: {
endpoint: {
url: 'https://api.github.com/graphql', // defaults to http://localhost:4000
headers: {
// optional
authorization: 'Bearer lkjfalkfjadkfjeopknavadf'
},
skipSSLValidation: true // optional, disables SSL validation check
}
}
};
```

#### Option 2: Local schema

In some cases you may have a locally generated file with your schema that you want to link. This can be either a `.graphql` file with the schema in SDL form or a saved introspection result in `.json`. To link your client project to a local schema file, configure it like so:

```js
module.exports = {
service: {
localSchemaFile: './path/to/schema.graphql'
}
};
```

0 comments on commit cc13ed0

Please sign in to comment.