ã²ãã
apollo-link-restã䜿çšãããã³ã«åããšã©ãŒãçºçããŸããApollodevtoolsã§GraphiQLãéããšãåžžã«ãTypeErrorïŒforward is notafunctionããšã©ãŒã衚瀺ãããŸãã ãšã©ãŒã®å šæïŒ
{
"errors": [
{
"message": "forward is not a function",
"locations": [
"TypeError: forward is not a function\n at RestLink../node_modules/apollo-link-rest/bundle.umd.js.RestLink.request (http://localhost:3000/static/js/bundle.js:5566:24)\n at http://localhost:3000/static/js/bundle.js:5746:33\n at ApolloLink.request (http://localhost:3000/static/js/bundle.js:2602:20)\n at ApolloLink.request (http://localhost:3000/static/js/bundle.js:5745:31)\n at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:3681\n at e.request (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:38654)\n at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:3681\n at e.request (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:38421)\n at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:3681\n at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:38085\n at new s (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:4855)\n at l.subscribe (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:6185)\n at n.<anonymous> (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:38914)\n at n.t.emit (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:52786)\n at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:19519\n at n (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/backend.js:1:36148)"
]
}
]
}
@restãã£ã¬ã¯ãã£ãã䜿çšããã¯ãšãªãšãã¥ãŒæ£åžžã«æ©èœããŠããããã§ãä»ã®ãšã©ãŒã¯ã¹ããŒãããªããããå®å
šã«ãããã¯ãããŠããåé¡ã§ã¯ãããŸãããã @ clientãã£ã¬ã¯ãã£ãã䜿çšããããšããŠãæ©èœããªããªã©ã®ä»ã®Apolloã¯ã©ã€ã¢ã³ãæ©èœã«åœ±é¿ãäžããå¯èœæ§ããããŸããåããšã©ãŒãã¹ããŒããŸãïŒ
3ã€ã®react-apolloãããžã§ã¯ãã®äŸïŒsimpleãadvancedãtypescriptïŒã®ã¯ããŒã³ãäœæããŸãããã3ã€ãã¹ãŠã§åããšã©ãŒã衚瀺ãããŸãã ïŒ121ã¯ãã®åé¡ãåç §ããŠããŸãããä¿®æ£ãããŠããªãããã§ãã å«ãŸããŠããä¿®æ£ã¯ãå¥ã®ããã§ããã«å€±æããŸããããã°ã«å¯Ÿãããã®ã§ãã æœåšçãªåå ãšããŠ@restãŸãã¯@clientãã£ã¬ã¯ãã£ããæ¬ èœããŠãããšããèšåããããŸãããåè¿°ã®ããã«ãããã¯ãµã³ãã«ãããžã§ã¯ããšç§èªèº«ã§çºçããŠããããããã£ã¬ã¯ãã£ããæ¬ èœããŠããããšãåå ã§ã¯ãªããšæããŸãã
åçŸããã«ã¯ããµã³ãã«ãããžã§ã¯ãã®ã¯ããŒã³ãäœæããChromeã§ApolloéçºããŒã«ãã€ã³ã¹ããŒã«ããŠèµ·åããŠéããŸãïŒãã®ãšã©ãŒãçºçããŠããçŸåšã®ããŒãžã§ã³ã¯70.0.3538.77ã§ãïŒã
ãããèŠãŠãããŠããããšããããã±ãŒãžã倧奜ãã§ãä¿¡ããããªãã»ã©äŸ¿å©ã ãšæããŸãïŒ
GraphIQLãapollo-link-state / apollo-link-restããµããŒãããŠãããšã¯æããŸãã-äžè¬çã«ãªã³ã¯ããµããŒãããŠãããšã¯æããŸããã ãã®åäœã®äŸã¯ãããŸããïŒ
確ãã«ãApolloéçºããŒã«ã®GraphiQLã¯æ©èœããŠããããã§ãã JSONPlaceholder apiã䜿çšããŠãRestLink uriãhttps://jsonplaceholder.typicode.comã«èšå®ã
ã¯ãšãªãå®è¡ããŠãã¹ãŠã®ãŠãŒã¶ãŒãååŸããåŸïŒ
ãŸãã¯ãåçŽãªããµã³ãã«ãããžã§ã¯ãã®å ŽåïŒ
ç§ãæ°ä»ããä»ã®äœãã¯ãããã£ãã·ã¥ããèªã¿åãããªãã·ã§ã³ããJSONPlaceholderAPIã§äœæãããæ°ãããšã³ããªã§ã¯æ©èœããªãããšã§ãã POSTãã¥ãŒããŒã·ã§ã³ã¯ãæ°ãããšã³ããªããã£ãã·ã¥ã«é©åã«æžã蟌ã¿ãŸãããåŸç¶ã®ã¯ãšãªã¯ãããã£ãã·ã¥ããèªã¿åãããéžæãããŠããå Žåã§ãããªã¢ãŒãã§ã¯ãšãªãå®è¡ããããšããŸãã æ°ãããšã³ããªã¯å®éã«ã¯äœæãããªããããããã¯æåŸ ã©ããã«ãªã¢ãŒããšã³ããã€ã³ãããnullãè¿ããŸããããã£ãã·ã¥ã«äœæãããã®ã§ãããã£ãã·ã¥ããèªã¿åããã¯ãããè¿ãå¿ èŠããããŸããïŒ ããã¯ããããapollo-link-restã«ãšããããããã®åé¡ã®ç¯å²å€ã§ãããããã§ãèå³æ·±ããã®ã§ãã
GraphiQLã§ãåããšã©ãŒforward is not a function
ãŸãã cache
以å€
ãã®äººã®æŽæ°ã¯ãç§ã¯åãåé¡ãæ±ããŠããŸãã:(
@cstoddartãã£ãã·ã¥ããã«ã¯ç©ºã§ãããïŒ
devtoolsãªãã§ãã£ãã·ã¥ã衚瀺ããæ¹æ³ãç¥ã£ãŠãã人ã¯ããŸããïŒ
ç§ãåãããšãçµéšããŠããŸãã @cgatianã¯ãããã£ãã·ã¥ããã«ã¯ç©ºã§ãã
ãããã®ç Žæãéåžžã«é·ãéçºçããå Žåãapolloã®ããŒã«ãã§ãŒã³ãæ¡çšããããšã¯å°é£ã§ãã apollo-link-restã¯ãŸã ç©æ¥µçã«åãçµãã§ããŸããïŒ
@ heymanhn-ã¯ãApolloLinkRestã¯ç©æ¥µçã«éçºãããŠããŸãã ããããããã¯ãªãŒãã³ãœãŒã¹ã§ãã PRã®ãã¹ããšé ä¿¡ãåãã§ãæäŒãããŸãããApolloDevToolsã®çµéšã¯ãããŸããã
ã³ãŒãããŒã¹ãšäºææ§ãä¿ã€ããã«äœãå¿ èŠããç解ããããã«ãã³ãŒãããŒã¹ãå®è¡ããŠããããŸãã¯é²ãã§å®è¡ã§ãã人ãå¿ èŠã§ãã ç§ã¯ããªãã«äœãæ¬ ããŠããã®ããç解ããããã«ææŠããŸãããããŠç§ã¯ããªãã®è²¢ç®ããµããŒãããããšæããŸãïŒ
ç§ã¯ãããã¯ããŸãç Žæã®ããããŠããå€ãã®è¡æ¹äžææãŸããç¹åŸŽã®ã ãšæããŸãã®ã§ãApolloDevToolsã§åããŠãããããŸã§ã®ã¢ããã»ãªã³ã¯äŒãããšãç¥ããªãããšããæããã«ãããã§ãã
ããã«ãç§ã¯å人çã«React-Nativeã§apollo-link-restã䜿çšããŠããŸããã1幎åãApolloDevToolsã¯React-Nativeãšäºææ§ããããŸããã§ããã
ãã以æ¥ã圌ãã¯ãããä¿®æ£ãããšçºè¡šããŸããããç§ã®ããŒã ã®react-nativeãããžã§ã¯ãã§ApolloDevToolsãã¢ã¯ãã£ãåã§ããªãã£ããããäœãåé¡ãªã®ãããããŸããã
ããã«ã¡ã¯ïŒ ãã®åé¡ã®åå ãå°ã調ã¹ãããšãã§ããŸããã
ãã®æäœã¯apollo-client-devtoolsã«ãã£ãŠåŒã³åºãããããã§ãã
ãã ããããã«å°éãããšã forward
ã¯æªå®çŸ©ã§ãã
ãããã©ã®ããã«æ©èœããã®ãå®å
šã«ã¯ããããŸãããããã§ãªããã°ãåé¡ã解決ããããã«PRãè¡ããŸãã !isRestQuery
ãã§ãã¯ã!isRestQuery && forward
ã«å€æŽãããšããäžèšã®ãšã©ãŒãæ¶é³ããããšãã§ããŸããã ãã ããæ°ãããšã©ãŒãçºçããŸããã
Error: Type Query must define one or more fields.
at t.assertValidSchema (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:258433)
at O (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:272246)
at k (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:271277)
at t.execute (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:270565)
at t.v (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:806774)
at t.n.emit (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:394893)
at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/dist/devtools.js:1:517657
ãã®åé¡ã確èª/ãããã°ããããã«äœ¿çšããã¢ããªã®äŸã次ã«ç€ºããŸãïŒ //github.com/Hilaryous/simple-react-app/tree/apollo-link-rest-exampleã
ãã®ã©ã€ãã©ãªã«ãååããã ãããããšãããããŸãã ç§ãäœããã®åœ¢ã§å©ããããšãã§ããã°ãç§ã¯ããããŠããããã§ãã
ç§ã¯æè¿ããã«ééãããšã©ãŒãIntrospectionQueryã«çµã蟌ã¿ãŸãããããã¯ãgraphiql / devtoolsãgraphqlãµãŒããŒã«ã¹ããŒããç §äŒããŠãããšæããŸããïŒ åé¡ã¯ãç§ã¯apollo-clientãšapollo-link-restã®ã¿ã䜿çšããŠããããããã£ãã·ã¥ã¹ããŒãïŒååšããå ŽåïŒãé€ããŠããµãŒããŒãŸãã¯ã¹ããŒããååšããªãããšã§ãã 次ã«ãç§ã®apollodevtoolsã¯ç©ºçœã§ãã ããã§ã®ä¿®æ£ãã©ããªããã¯æ£ç¢ºã«ã¯ããããŸãããããã¹ãŠã1ã€ã®æç¹ã§æ©èœããŸããã
ç§ã¯æè¿ããã«ééãããšã©ãŒãIntrospectionQueryã«çµã蟌ã¿ãŸãããããã¯ãgraphiql / devtoolsãgraphqlãµãŒããŒã«ã¹ããŒããç §äŒããŠãããšæããŸããïŒ åé¡ã¯ãç§ã¯apollo-clientãšapollo-link-restã®ã¿ã䜿çšããŠããããããã£ãã·ã¥ã¹ããŒãïŒååšããå ŽåïŒãé€ããŠããµãŒããŒãŸãã¯ã¹ããŒããååšããªãããšã§ãã 次ã«ãç§ã®apollodevtoolsã¯ç©ºçœã§ãã ããã§ã®ä¿®æ£ãã©ããªããã¯æ£ç¢ºã«ã¯ããããŸãããããã¹ãŠã1ã€ã®æç¹ã§æ©èœããŸããã
ãã£ã¡ãäžç·
å é±ã®æšææ¥ã«ãApolloDevToolsãReact Native Debuggerã§apollo-link-stateãapollo-link-Restãšé£æºããŠããã®ãèŠãŸããã ããã¯ãŸã 掻çºãªåé¡ã§ãããšç¢ºä¿¡ããŠããŸããïŒ @ edgars-sirokovsã«ã¯ã©ã®ããŒãžã§ã³ããããŸããïŒ
å é±ã®æšææ¥ã«ãApolloDevToolsãReact Native Debuggerã§apollo-link-stateãapollo-link-Restãšé£æºããŠããã®ãèŠãŸããã ããã¯ãŸã 掻çºãªåé¡ã§ãããšç¢ºä¿¡ããŠããŸããïŒ @ edgars-sirokovsã«ã¯ã©ã®ããŒãžã§ã³ããããŸããïŒ
@fbartho 2.2.4
@fbarthoãããäžåºŠãã§ãã¯ããŸãã-ä»ã¯ã¡ãã£ãšåäœããŠããŸãã å°ãªããšããã空çœã§ã¯ãããŸããã
ãã ãããŸã åé¡ããããŸãããã£ãã·ã¥ãã¥ãŒãã¹ã¯ããŒã«ã§ãããDocumentation Explorerã«ã¹ããŒãã衚瀺ãããŸããïŒ typeDefs
ä»ããŠæž¡ãããã¯ã©ã€ã¢ã³ãåŽã®ã¹ããŒãã®ã¿ããããŸãïŒã
ããã¥ã¡ã³ããšã¯ã¹ãããŒã©ãŒãapollo-link-restããµããŒãããããã«äœãå¿ èŠãã¯ããããŸããããããã¹ãããšããã£ããšããŠãé©ããªãã§ãããã ããã§äœæ¥ãå¿ èŠãªå Žåã¯PRãåãå ¥ããŸãïŒ
ãã£ãã·ã¥ãã¥ãŒã®ã¹ã¯ããŒã«ã¯ãééããªãApolloDevToolsã³ãŒãã®ãã°ã®ããã§ãã
ãããã@ edgars-sirokovsã§é²æ©ãéããŠããã£ãã§ãïŒ
å é±ã®æšææ¥ã«ãApolloDevToolsãReact Native Debuggerã§apollo-link-stateãapollo-link-Restãšé£æºããŠããã®ãèŠãŸããã ããã¯ãŸã 掻çºãªåé¡ã§ãããšç¢ºä¿¡ããŠããŸããïŒ @ edgars-sirokovsã«ã¯ã©ã®ããŒãžã§ã³ããããŸããïŒ
simple
ãããžã§ã¯ãã§ãã¹ãããŸããããæ©èœããŸãããApolloDevToolsã¿ãã¯äœ¿çšã§ããŸãããåžžã«ç©ºçœã§ããã次ã®ãšã©ãŒãçºçããŸãã https://github.com/apollographql/apollo-link-rest/tree/master/examples/simple
@fbarthoç§ãreact-native-debuggerã䜿çšããŠ
ä»æ¥ããããæ©èœããããšãåŠã³ãŸãã-ãã ããGraphiQLã¿ãã§ã¯ãªããä»ã®ã¿ãã®ã¿ã§ãïŒ https ïŒ
ãããšåãåé¡ã®ããã«èŠãããããdevtools GraphiQLã§ããŒã«ã«ã¹ããŒãDocs
ãèªã¿åãããšãã§ããŸããã
ãã®ã€ã³ããã¹ãã¯ã·ã§ã³ã¯ãšãªãå®è¡ãããšãå¿çããã«ã«[object Object]
ã衚瀺ãããã³ã³ãœãŒã«ã¯[Network error]: TypeError: forward is not a function
å ±åããŸã
{
__schema {
types {
name
}
}
}
ç§ã®ã¯ã©ã€ã¢ã³ãã«ã¯graphqlãµãŒããŒããããŸããïŒ
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { persistCache } from 'apollo-cache-persist';
import localForage from 'localforage';
import typeDefs from './schema.graphql';
import { resolvers } from './resolvers';
import { link } from './link';
import { initialState } from './initialState';
export let client;
export async function createApolloClient() {
const cache = new InMemoryCache();
await persistCache({ cache, storage: localForage, serialize: false });
client = new ApolloClient({ cache, link, resolvers, typeDefs });
window.__APOLLO_CLIENT__ = client;
cache.writeData({ data: initialState });
return client;
}
ãããäžèšã®ãã¹ãŠã®äººã®ããã«ãŠãŒã¹ã±ãŒã¹ã«æ£ç¢ºã«é¢é£ããŠãããã©ããã¯ããããŸããããããã¯ç§ãæçµçã«è§£æ±ºãããšã©ãŒã§èŠã€ããå¯äžã®é¢é£ããæ€çŽ¢çµæã§ãã
ç§ãè¿œå ããããšããŠãããšããç§ã¯æè¿ããã®ãšã©ãŒã«ééããapollo-link-rest
䜿çšããŠãæ¢åã®ã¢ããªã±ãŒã·ã§ã³ã«@apollo/client
ã
tl; dræ°ããApolloCient
å®çŸ©ãããšãã«ããªãã·ã§ã³ãã©ã¡ãŒã¿ãšããŠuri
ãšlink
äž¡æ¹ãæž¡ãããšãã§ããªããšããåé¡ãå€æããŸããã 代ããã«ãããªãã¯åé€ããå¿
èŠããããŸãuri
ãã©ã¡ãŒã¿ãããŠäœæããHttpLink
䜿çšããŠcreateHttpLink
ããŠãã䜿çšããŠfrom()
ã«ããªãã®ãªã³ã¯ãšããããçµåããããã«link
ãªãã·ã§ã³ãã©ã¡ãŒã¿ã
æ®ãã®ãªã³ã¯ãè¿œå ããåã¯ã次ã®ããã«å®çŸ©ãããŠããŸããã
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: '/api/graphql',
cache: new InMemoryCache(),
});
ããã¥ã¡ã³ããèªãã ãšããæ°ããRestLink
ãå®çŸ©ãã次ã®ããã«ãªãã·ã§ã³ã«è¿œå ã®link
ãã©ã¡ãŒã¿ãŒãè¿œå ããããšã§ãRESTãªã³ã¯ãè¿œå ã§ããã¯ãã ãšããå°è±¡ãåããŸããã
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { RestLink } from 'apollo-link-rest';
const restLink = new RestLink({
uri: '/api',
});
const client = new ApolloClient({
uri: '/api/graphql',
cache: new InMemoryCache(),
link: restLink,
});
ãã ãããã®æ§æã«ããã TypeError: forward is not a function
ãšã©ãŒãçºçããã¯ã©ã€ã¢ã³ããæ©èœããªããªããŸããã
ãªã³ã¯ã«é¢ããããã¥ã¡ã³ããããã«èªãã åŸã uri
ãšlink
䜿çšã§ããªãããšã«æ°ä»ããŸããïŒæ瀺çã«ã¯è¡šç€ºãããŠããŸããã§ãããããããæ£ãããªãå ŽåããããŸãïŒãåæã«ApolloClient
å®çŸ©ã®link
ãªãã·ã§ã³ãã©ã¡ãŒã¿ã ãã®æ°ããæ
å ±ã䜿çšããŠIåé€ããããšã§åé¡ã解決ããããšãã§ããŸããuri
ãã©ã¡ãŒã¿ããã³äœæHttpLink
ç§ã¯ãããŸã§ãšçµã¿åãããããšRestLink
䜿çšããŠfrom()
ãšãã¹ãŠãæçµçã«æ©èœããŸããïŒããã¥ã¡ã³ãã«ãããšã RestLink
ã¯HttpLink
åã«é
眮ããå¿
èŠãããããšã«æ³šæããŠãã ããïŒïŒ
import {
ApolloClient, InMemoryCache, from, createHttpLink,
} from '@apollo/client';
import { RestLink } from 'apollo-link-rest';
const httpLink = createHttpLink({
uri: '/api/graphql',
});
const restLink = new RestLink({
uri: '/api',
});
const client = new ApolloClient({
cache: new InMemoryCache(),
link: from([restLink, httpLink]),
});
ããããšã@crbanmanããªãã¯ç§ã®æ¥ãæã£ãïŒ ð¯
æãåèã«ãªãã³ã¡ã³ã
ããã«ã¡ã¯ïŒ ãã®åé¡ã®åå ãå°ã調ã¹ãããšãã§ããŸããã
ãã®æäœã¯apollo-client-devtoolsã«ãã£ãŠåŒã³åºãããããã§ãã
ãã ããããã«å°éãããšã
forward
ã¯æªå®çŸ©ã§ãããããã©ã®ããã«æ©èœããã®ãå®å šã«ã¯ããããŸãããããã§ãªããã°ãåé¡ã解決ããããã«PRãè¡ããŸãã
!isRestQuery
ãã§ãã¯ã!isRestQuery && forward
ã«å€æŽãããšããäžèšã®ãšã©ãŒãæ¶é³ããããšãã§ããŸããã ãã ããæ°ãããšã©ãŒãçºçããŸããããã®åé¡ã確èª/ãããã°ããããã«äœ¿çšããã¢ããªã®äŸã次ã«ç€ºããŸãïŒ //github.com/Hilaryous/simple-react-app/tree/apollo-link-rest-exampleã
ãã®ã©ã€ãã©ãªã«ãååããã ãããããšãããããŸãã ç§ãäœããã®åœ¢ã§å©ããããšãã§ããã°ãç§ã¯ããããŠããããã§ãã