Skip to main content

Query Client Configuration

Configure default options for all queries and mutations when creating the React Query client.

Default Options​

Set default options when creating declareClient:

const client = declareClient({
  api,
  defaults: {
    keyPrefix: ['api', 'v1'],
    keySuffix: ['cache'],
  },
})

Key Prefix​

Add a prefix to all query keys:

const client = declareClient({
  api,
  defaults: {
    keyPrefix: ['api', 'v1'],
  },
})

const getUser = client.query({
  method: 'GET',
  url: '/users/$userId',
  responseSchema: userSchema,
  processResponse: (data) => data,
})

// Key: ['api', 'v1', 'users', '123']
const key = getUser.queryKey.dataTag({ urlParams: { userId: '123' } })

Key Suffix​

Add a suffix to all query keys:

const client = declareClient({
  api,
  defaults: {
    keySuffix: ['cache'],
  },
})

const getUser = client.query({
  method: 'GET',
  url: '/users/$userId',
  responseSchema: userSchema,
  processResponse: (data) => data,
})

// Key: ['users', '123', 'cache']
const key = getUser.queryKey.dataTag({ urlParams: { userId: '123' } })

Combined Prefix and Suffix​

const client = declareClient({
  api,
  defaults: {
    keyPrefix: ['api', 'v1'],
    keySuffix: ['cache'],
  },
})

// Key: ['api', 'v1', 'users', '123', 'cache']

Use Cases​

API Versioning​

const client = declareClient({
  api,
  defaults: {
    keyPrefix: ['api', 'v2'],
  },
})

Environment Isolation​

const client = declareClient({
  api,
  defaults: {
    keyPrefix: ['api', process.env.NODE_ENV],
  },
})

Cache Namespacing​

const client = declareClient({
  api,
  defaults: {
    keyPrefix: ['app', 'cache'],
    keySuffix: ['v1'],
  },
})

Next Steps​