TIL 2018-05-30
오늘 배운 것
1. prisma와 graphql-cli 업그레이드
yarn info prisma 및 yarn info graphql-cli로 사용 가능한 버전 확인. 그리고 package.json파일 수정하여 업그레이드를 하니 2018-05-28에 발생한 불일치 문제가 사라졌다. 이것은 playground와 prisma가 모두 graphql-config-extension-prisma를 사용하고, 따라서 prisma.yml의 스키마가 일치해야 하기 때문이라고 한다.
문제는 그렇게 한다면 semver를 따를 때 애초에 prisma와 graphql-cli의 메이저 버전이 올라가야 하는거 아닌가..
그렇지만 여전히 포트 변경은 안 되고 있다..
2. prisma server의 포트 변경
성공! GraphQL서버의 시작에 옵션을 주어야 했다.
📁
index.js
server.start({ port: 4001 })
안타깝게도, .graphqlconfig.yml은 environment variable을 사용할 방법이 없으므로 포트를 변경할 때 .graphqlconfig.yml과 index.js의 시작 포트를 같이 변경해줄 수 밖에 없는 것으로 보인다. 아니면 아예 index.js에서 .graphqlconfig.yml의 값을 읽어오는게 더 나을 듯.
js-yaml 패키지를 쓰면 될 듯하다.
js-yaml 패키지와 fs 패키지 그리고 노드의 기본 패키지인 url을 이용하여 다음과 같이 설정하니 .graphqlconfig.yaml의 내용을 읽을 수 있었다.
const yaml = require('js-yaml');
const fs = require('fs');
var url = require('url')
// Get document, or throw exception on error
let port = 4000;
try {
let doc = yaml.safeLoad(fs.readFileSync('./.graphqlconfig.yaml', 'utf8'));
const u = url.parse(doc.projects.app.extensions.endpoints.default);
port = u.port;
} catch (e) {
console.log(e);
}
console.log(`starting graphql server on port ${port}`)
server.start({ port })
3. 프론트에 prisma 스키마를 사용하게 하기. (실패)
현재 프론트의 app.js에서 다음과 같이 db의 local app graphgql endpoint를 사용하도록 설정했더니 http://localhost:8081/graphql 에서 스키마가 적용된 것을 확인할 수 있었다.
config.setGraphQLEndpoint("http://localhost:<my port>");
상당히 쓸만해보이는 graphgql code 발견 : https://github.com/apollographql/react-apollo/issues/604
class App extends Component {
render() {
const { data: { refetch, loading, hero, error } } = this.props;
if(loading) {
return (<p>Loading…</p>);
}
return (
<main>
<header>
<h1>Apollo Client Error Template</h1>
<p>{error && error.message}</p>
<h3>{!error && hero.name}</h3>
<button onClick={() => refetch().catch(e => null)}>
Refetch
</button>
</header>
</main>
);
}
}
Comments