Skip to content

feat: allow passing custom axios instance to createInertiaApp #2104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/core/src/request.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { default as axios, AxiosProgressEvent, AxiosRequestConfig } from 'axios'
import { default as axios, AxiosInstance, AxiosProgressEvent, AxiosRequestConfig } from 'axios'
import { fireExceptionEvent, fireFinishEvent, firePrefetchingEvent, fireProgressEvent, fireStartEvent } from './events'
import { page as currentPage } from './page'
import { RequestParams } from './requestParams'
@@ -7,6 +7,8 @@ import { ActiveVisit, Page } from './types'
import { urlWithoutHash } from './url'

export class Request {
protected static axiosInstance: AxiosInstance = axios

protected response!: Response
protected cancelToken!: AbortController
protected requestParams: RequestParams
@@ -20,6 +22,10 @@ export class Request {
this.cancelToken = new AbortController()
}

public static setAxiosInstance(axiosInstance: AxiosInstance): void {
Request.axiosInstance = axiosInstance
}

public static create(params: ActiveVisit, page: Page): Request {
return new Request(params, page)
}
@@ -40,7 +46,7 @@ export class Request {
// as a regular response once the prefetch is done
const originallyPrefetch = this.requestParams.all().prefetch

return axios({
return Request.axiosInstance({
method: this.requestParams.all().method,
url: urlWithoutHash(this.requestParams.all().url).href,
data: this.requestParams.data(),
5 changes: 5 additions & 0 deletions packages/core/src/router.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { AxiosInstance } from 'axios'
import { hideProgress, revealProgress } from '.'
import { eventHandler } from './eventHandler'
import { fireBeforeEvent } from './events'
@@ -66,6 +67,10 @@ export class Router {
})
}

public setAxiosInstance(axiosInstance: AxiosInstance): void {
Request.setAxiosInstance(axiosInstance)
}

public get<T extends RequestPayload = RequestPayload>(
url: URL | string,
data: T = {} as T,
8 changes: 8 additions & 0 deletions packages/react/src/createInertiaApp.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Page, PageProps, PageResolver, router, setupProgress } from '@inertiajs/core'
import { ComponentType, FunctionComponent, Key, ReactElement, ReactNode, createElement } from 'react'
import { renderToString } from 'react-dom/server'
import { AxiosInstance } from 'axios'
import App from './App'

type ReactInstance = ReactElement
@@ -46,6 +47,7 @@ type InertiaAppOptionsForCSR<SharedProps extends PageProps> = BaseInertiaAppOpti
showSpinner?: boolean
}
setup(options: SetupOptions<HTMLElement, SharedProps>): CreateInertiaAppSetupReturnType
axiosInstance?: AxiosInstance
}

type CreateInertiaAppSSRContent = { head: string[]; body: string }
@@ -55,6 +57,7 @@ type InertiaAppOptionsForSSR<SharedProps extends PageProps> = BaseInertiaAppOpti
render: typeof renderToString
progress?: undefined
setup(options: SetupOptions<null, SharedProps>): ReactInstance
axiosInstance?: undefined
}

export default async function createInertiaApp<SharedProps extends PageProps = PageProps>(
@@ -71,6 +74,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
progress = {},
page,
render,
axiosInstance,
}: InertiaAppOptionsForCSR<SharedProps> | InertiaAppOptionsForSSR<SharedProps>): Promise<
CreateInertiaAppSetupReturnType | CreateInertiaAppSSRContent
> {
@@ -82,6 +86,10 @@ export default async function createInertiaApp<SharedProps extends PageProps = P

let head = []

if (!isServer && axiosInstance) {
router.setAxiosInstance(axiosInstance)
}

const reactApp = await Promise.all([
resolveComponent(initialPage.component),
router.decryptHistory().catch(() => {}),
9 changes: 8 additions & 1 deletion packages/svelte/src/createInertiaApp.ts
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import escape from 'html-escape'
import type { ComponentType } from 'svelte'
import App, { type InertiaAppProps } from './components/App.svelte'
import type { ComponentResolver } from './types'
import { AxiosInstance } from 'axios'

type SvelteRenderResult = { html: string; head: string; css?: { code: string } }
type AppComponent = ComponentType<App> & { render: (props: InertiaAppProps) => SvelteRenderResult }
@@ -24,6 +25,7 @@ interface CreateInertiaAppProps {
showSpinner?: boolean
}
page?: Page
axiosInstance?: AxiosInstance
}

export default async function createInertiaApp({
@@ -32,12 +34,17 @@ export default async function createInertiaApp({
setup,
progress = {},
page,
axiosInstance
}: CreateInertiaAppProps): InertiaAppResponse {
const isServer = typeof window === 'undefined'
const el = isServer ? null : document.getElementById(id)
const initialPage: Page = page || JSON.parse(el?.dataset.page || '{}')
const resolveComponent = (name: string) => Promise.resolve(resolve(name))


if (!isServer && axiosInstance) {
router.setAxiosInstance(axiosInstance)
}

const [initialComponent] = await Promise.all([
resolveComponent(initialPage.component),
router.decryptHistory().catch(() => {}),
7 changes: 7 additions & 0 deletions packages/vue3/src/createInertiaApp.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Page, router, setupProgress } from '@inertiajs/core'
import { DefineComponent, Plugin, App as VueApp, createSSRApp, h } from 'vue'
import App, { InertiaApp, InertiaAppProps, plugin } from './app'
import { AxiosInstance } from 'axios'

interface CreateInertiaAppProps {
id?: string
@@ -17,6 +18,7 @@ interface CreateInertiaAppProps {
}
page?: Page
render?: (app: VueApp) => Promise<string>
axiosInstance?: AxiosInstance
}

export default async function createInertiaApp({
@@ -27,6 +29,7 @@ export default async function createInertiaApp({
progress = {},
page,
render,
axiosInstance,
}: CreateInertiaAppProps): Promise<{ head: string[]; body: string }> {
const isServer = typeof window === 'undefined'
const el = isServer ? null : document.getElementById(id)
@@ -35,6 +38,10 @@ export default async function createInertiaApp({

let head = []

if (!isServer && axiosInstance) {
router.setAxiosInstance(axiosInstance)
}

const vueApp = await Promise.all([
resolveComponent(initialPage.component),
router.decryptHistory().catch(() => {}),