μμλλ λμ
apollo-link-error onError
μν΄ μμ±λ ApolloLink
μ νμ apollo-link-http λ° apollo-clientμμ μ¬μ©νλ ApolloLink
μ μΌμΉν΄μΌ ν©λλ€.
μ€μ νλ
κ²°κ³Ό apollo-link-* ν¨ν€μ§μλ λ κ°μ νΈνλμ§ μλ ApolloLink
μ νμ΄ μλ κ² κ°μ΅λλ€.
μλ μμ λ νμλ μ₯μμμ TypeScript μ€λ₯λ₯Ό λ°ννμ§λ§ νμλ μ₯μμ as any
λ₯Ό μΆκ°ν λ μμλλ‘ μλν©λλ€.
_λ¨μν_ μ¬μμ°
import { InMemoryCache } from 'apollo-cache-inmemory'
import ApolloClient from 'apollo-client'
import { ApolloLink } from 'apollo-link'
import { onError } from 'apollo-link-error'
import { createHttpLink } from 'apollo-link-http'
const httpLink = createHttpLink({ uri: apiUrl })
const authLink = new ApolloLink((operation, forward) => {
const token = getToken()
if (token) {
operation.setContext({
headers: {
Authorization: `Bearer ${token}`,
},
})
}
return forward(operation)
})
const logLink = onError(error => console.error('Apollo Error', error)) // as any
const link = logLink.concat(authLink.concat(httpLink)) // as any
/*
TS2345: Argument of type 'ApolloLink' is not assignable to parameter of type 'ApolloLink | RequestHandler'.
Type 'ApolloLink' is not assignable to type 'RequestHandler'.
Type 'ApolloLink' provides no match for the signature '(operation: Operation, forward?: NextLink): Observable<FetchResult<Record<string, any>, Record<string, any>>>'.
*/
export const graphql = new ApolloClient({
cache: new InMemoryCache(),
link,
})
/*
TS2345: Argument of type '{ cache: InMemoryCache; link: ApolloLink; }' is not assignable to parameter of type 'ApolloClientOptions<NormalizedCacheObject>'.
Types of property 'link' are incompatible.
Type 'ApolloLink' is not assignable to type 'ApolloLink'. Two different types with this name exist, but they are unrelated.
Types of property 'split' are incompatible.
Type '(test: (op: Operation) => boolean, left: ApolloLink | RequestHandler, right?: ApolloLink | Reques...' is not assignable to type '(test: (op: Operation) => boolean, left: ApolloLink | RequestHandler, right?: ApolloLink | Reques...'. Two different types with this name exist, but they are unrelated.
Types of parameters 'left' and 'left' are incompatible.
Type 'ApolloLink | RequestHandler' is not assignable to type 'ApolloLink | RequestHandler'. Two different types with this name exist, but they are unrelated.
Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
Type 'ApolloLink' is not assignable to type 'RequestHandler'.
*/
μ΄μ λΌλ²¨
μ λ μ΄ λ¬Έμ λ₯Ό λ³΄κ³ μμ΅λλ€.
μ¬κΈ°λ λ§μ°¬κ°μ§...
@iki ν₯λ―Έ https://github.com/evans/apollo-link-reproductions/tree/538 μμ 'npm run compile'μ μ€ννλ©΄ μ ν μ€λ₯κ° νμλμ§ μμ΅λλ€. ApolloLink
μ μ€λ¦¬ νμ΄νμ΄ λμΌν΄μΌ νλ―λ‘ μ νμ΄ μλν΄μΌ ν©λλ€. 볡μ ν μ μλ 볡μ μ μ₯μκ° μμ΅λκΉ? TSμ μ΅μ λ²μ μ μ μΈν΄μΌ ν μλ μμ΅λλ€.
μ΄ λ¬Έμ κ° μμκ³ package.json
μ apollo-link
λ²μ μ λ€μκ³Ό κ°μ΄ μμ νμ¬ ν΄κ²°ν κ² κ°μ΅λλ€.
{
"dependencies": {
"dependencies": {
"apollo-cache-inmemory": "^1.1.12",
"apollo-client": "^2.2.8",
"apollo-codegen": "^0.19.0",
"apollo-link": "^1.2.1",
"apollo-link-batch-http": "^1.2.1",
"apollo-link-http": "^1.5.3",
"apollo-link-retry": "^2.2.2"
},
"resolutions": {
"apollo-link": "1.2.1"
}
}
graphql
λ‘ λΉμ·ν μμ
μ μννμ¬ λ³΅μ¬λ³Έμ΄ νλλ§ μ‘΄μ¬νλλ‘ ν΄μΌ νμ΅λλ€.
μ΄κ²μ κ°μ₯ μ΅κ·Ό 릴리μ€μμ μμ λμ΄μΌ ν©λλ€. #600μ μν΄ νμλκ³ [email protected]μ 릴리μ€λ #599λ₯Ό μ°Έμ‘°νμμμ€.
@evans μ λ μ¬μ ν [email protected] μ΄ λ¦΄λ¦¬μ€λκΈ°λ₯Ό κΈ°λ€λ¦¬κ³ μμΌλ―λ‘ μ΄ λ¬Έμ μ λν μμ μ¬νμ μ»μ μ μμ΅λλ€. λ€λ₯Έ ν΄λ‘ ν¨ν€μ§λ₯Ό μ κ·Έλ μ΄λνλ λ° λ°©ν΄κ° λ©λλ€.
μ¬κΈ°λ λ§μ°¬κ°μ§μ λλ€. 1.0.10 κ²μλ₯Ό κΈ°λ€λ¦¬κ³ μμ΅λλ€.
@ravishivt @sccdGyan μ£μ‘ν©λλ€! κ·Έκ³³μμ λ¬΄μ¨ μΌμ΄ μΌμ΄λ¬λμ§ μ λͺ¨λ₯΄κ² μ΅λλ€. λ¬Έμ λ [email protected] μμ μ 리λμ΄μΌ ν©λλ€.
λΉμ·ν λ¬Έμ κ° μμ΅λλ€.
κ΄λ ¨ μ’ μμ±:
"dependencies": {
"@apollo/client": "^3.0.0-beta.19",
"apollo-link-ws": "^1.0.19",
"graphql": "^14.5.8",
"subscriptions-transport-ws": "^0.9.16",
...
},
μνΈ:
import {
ApolloClient,
InMemoryCache,
HttpLink,
ApolloLink,
Operation,
NextLink,
split,
getMainDefinition
} from '@apollo/client'
import { WebSocketLink } from 'apollo-link-ws';
const wsLink = new WebSocketLink({
uri: config.backendWSApiUrl,
options: {
reconnect: true
}
})
const httpLink = new HttpLink({
uri: config.backendHttpApiUrl
})
const link = split(
// split based on operation type
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink,
);
νμ μ€ν¬λ¦½νΈ μ€λ₯:
Argument of type 'WebSocketLink' is not assignable to parameter of type 'ApolloLink | RequestHandler'.
Type 'WebSocketLink' is missing the following properties from type 'ApolloLink': onError, setOnErrorts(2345)
3.0 λ² νμ @mnesarco μ λμΌ
λλ κ°μ κ²μ λ§λκ³ μλ€.
"@apollo/client": "~3.0.0-beta.29
λ° "@apollo/link-error": "^2.0.0-beta.3",
ApolloLink.from([errorLink, httpLink])
@smeevil μ΄ λ¬Έμ μ λν μμ μ¬νμ
μλμ
μ΄κ±° λ€μ μ΄μ΄μΌ νλ?
μ΅μ Apollo ν΄λΌμ΄μΈνΈ 3.0.0 λ² ν 32 λ²μ μ λ°μ΄νΈλ‘ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€.
1.1.12 μμ [email protected]μΌλ‘ μ λ°μ΄νΈνλ©΄ μ μκ² ν¨κ³Όμ μ΄μμ΅λλ€.
μ§κΈ μ¬μ©νλ λͺ¨λ κ²μ΄ μ’μ΅λλ€.
"@apollo/client": "^3.0.0-beta.37",
"@apollo/link-context": "^2.0.0-beta.3",
"@apollo/link-error": "^2.0.0-beta.3",
"@apollo/link-retry": "^2.0.0-beta.3",
"@apollo/link-ws": "^2.0.0-beta.3",`
μ§κΈ μ¬μ©νλ λͺ¨λ κ²μ΄ μ’μ΅λλ€.
"@apollo/client": "^3.0.0-beta.37", "@apollo/link-context": "^2.0.0-beta.3", "@apollo/link-error": "^2.0.0-beta.3", "@apollo/link-retry": "^2.0.0-beta.3", "@apollo/link-ws": "^2.0.0-beta.3",`
κ°μ¬ ν΄μ! @apollo/clientλ₯Ό 3.0.0-beta.39λ‘ μ λ°μ΄νΈνλ©΄ μ΄ μ€λ₯κ° λ°μν©λλ€.
μ¬μ© @apollo/link-error
λμ apollo-link-error
λ μν΄ μΌνμ΅λλ€.
μ λ Apolloλ₯Ό μ²μ μ¬μ©νλ©° Apollo λ§ν¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ§μ μ¬μ©νμ§ μκ³ apollo-boost
μμ ApolloClient
λ₯Ό κ°μ Έμ€λλ‘ μ§μνλ Apollo Server κ°μ΄λλ₯Ό λ°λ₯΄λ©΄ μ΄ μ€λ₯κ° λ°μνμ΅λλ€. λ΄ μ½λλ λ€μκ³Ό κ°μ΅λλ€.
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: "/api/graphql",
});
const App = ({ Component, pageProps }: AppProps) => {
return (
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
)
}
@apollo/client
λ₯Ό μ€μΉνκ³ λ€μκ³Ό κ°μ΄ 리ν©ν λ§νμ¬ λ¬Έμ λ₯Ό ν΄κ²°ν μ μμμ΅λλ€.
import { ApolloClient, HttpLink, InMemoryStore } from '@apollo/client';
const client = new ApolloClient({
cache: new InMemoryStore(),
link: new HttpLink({ uri: "/api/graphql" })
});
const App = ({ Component, pageProps }: AppProps) => {
return (
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
)
}
κ°μ¬ ν΄μ! @apollo/clientλ₯Ό 3.0.0-beta.39λ‘ μ λ°μ΄νΈνλ©΄ μ΄ μ€λ₯κ° λ°μν©λλ€.
μ΄κ²μ κ°μ¬νκ²λ @apollo/client λ²μ μμ 3.0.0-beta.41λ‘ μμ λ κ² κ°μ΅λλ€!
μ€λ μλ‘μ΄ 3.0.0-beta.43μ μλνμ λ μ΄ λ¬Έμ κ° λ°μνμ΅λλ€.
λ€λ₯Έ μ¬λμκ² λμμ΄ λλ κ²½μ° ν΄κ²° λ°©λ²μ 곡μ ν μ μμμ΅λλ€.
λλ₯Ό μν΄ package.json "ν΄μλ" νλλ₯Ό beta.43μΌλ‘ μ§μ νκ±°λ λλ yarn.lock
μμ νκ³ λ€μ μ€μΉνλ©΄ μ΄ λ¬Έμ κ° ν΄κ²°λ©λλ€.
3.0.0-beta.44μμ. package.jsonμ resolution νλλ₯Ό μΆκ°νκ³ yarn.lock νμΌμ μμ νλ €κ³ μλνμ§λ§ λ λ€ ν¨κ³Όκ° μμμ΅λλ€.
λλ₯Ό μν΄ ν΄λΌμ΄μΈνΈ λ° λ§ν¬ μ€λ₯λ₯Ό μ
κ·Έλ μ΄λνλ©΄ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€.
"@apollo/client": "^3.0.0-beta.49", "@apollo/link-error": "^2.0.0-beta.3"
λλ μΌμ Έμλ€
"@apollo/client": "^3.0.0-beta.50",
"@apollo/link-context": "^2.0.0-beta.3",
μ¬μ νμ΄ λ¬Έμ κ° μμ΅λλ€.
λλ μΌμ Έμλ€
"@apollo/client": "^3.0.0-beta.50", "@apollo/link-context": "^2.0.0-beta.3",
μ¬μ νμ΄ λ¬Έμ κ° μμ΅λλ€.
λ΄ νλ‘μ νΈμ κ²½μ° package.jsonμ μ£Όμ κΉκ² κ²ν νκ³ _all_ things Apolloκ° 3.0μΈμ§ νμΈν λ€μ, yarn.lock μμ λ° yarn μ€μΉκ° λ€μ μλνλμ§ νμΈνμ΅λλ€.
@onpaws κ°μ¬ graphql-codegen
)μΌλ‘ κ°μ§κ³ μλ λ€λ₯Έ (dev) μ’
μμ±μ΄ μλ€λ κ²μ΄λ©°, λλ κ·Έκ²λ€μ μ κ±°ν μ€λΉκ° λμ΄ μμ§ μμ΅λλ€. νμ§λ§ μ λ μ μ½λμμ μ€λλ κ²μ _κ°μ Έμ€μ§_ μμ΅λλ€. κ·Έλμ Typescriptκ° μ κ·Έκ²λ€μ λν΄ νΌλμ€λ¬μνλμ§ μ΄ν΄νμ§ λͺ»ν©λλ€. μ λ Typescriptλ₯Ό μ²μ μ νκΈ° λλ¬Έμ μ΄κ²μ λ¨μ§ "λ" λ¬Έμ μΌ κ°λ₯μ±μ΄ ν½λλ€. μ°μ€κ½μ€λ½κ² 보μ΄μ§λ§ as any
λ₯Ό ν΅ν΄ μΊμ€ν
νλ©΄ λͺ¨λ κ²μ΄ μ μ€νλ©λλ€.
export const client = new ApolloClient({
cache: new InMemoryCache(),
link: authenLink.concat(httpLink as any) as any
});
κ°μ₯ μ μ©ν λκΈ
μ λ μ΄ λ¬Έμ λ₯Ό λ³΄κ³ μμ΅λλ€.