---
searchable: false
---

import { Callout } from '@theguild/components'

# Snapshot Plugin

The `snapshot` plugin allows applying snapshot for development usage.

The snapshot plugin writes the responses of your remote data source to your file system and then
uses it instead of re-fetching it every time. It’s also helpful because you can easily manipulate
your data manually and see how your gateway responds.

Then, add it to your plugins:

```ts filename="gateway.config.ts"
import { defineConfig, useSnapshot } from '@graphql-hive/gateway'

export const gatewayConfig = defineConfig({
  plugins: pluginCtx => [
    useSnapshot({
      ...pluginCtx,
      // You can provide a custom condition to enable/disable the plugin
      if: () => process.env.NODE_ENV === 'development',
      // The directory where the snapshots will be stored
      outputDir: '__snapshots__',
      // The origins to apply the snapshot
      apply: ['https://my-remote-api.com/*']
    })
  ]
})
```

The following snapshot will work if you are in a development environment (see the `if` command).

To modify your snapshots and change the responses, go to `__snapshots__` and modify the responses
under those files.
