在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):kadirahq/meteor-graphql开源软件地址(OpenSource Url):https://github.com/kadirahq/meteor-graphql开源编程语言(OpenSource Language):JavaScript 96.2%开源软件介绍(OpenSource Introduction):LokkaGraphQL Support for Meteor withThis is an alternative data layer for Meteor with GraphQL. Basically, it'll allow you to expose GraphQL schemas to the client. Then you can use Lokka to interact with GraphQL schemas in the client side. UsageAdd it your app with:
Then run your app with: Then visit http://localhost:3000/graphql to see all the schemas available in your app. Getting StartedRefer this guide to get started with GraphQL inside Meteor. Features
APIGraphQL Meteor intergration comes with few simple APIs. Let's explore them: GraphQL.types [server only]This holds all the types in GraphQL, where you can used to build GraphQL schemas. Check this schema for a sample usage. GraphQL.registerSchema() [server only]This API allows you to register a GraphQL schema with Meteor. Then you can use it on the client and inside the in-browser IDE. const schema = new GraphQLSchema({
query,
mutation
});
GraphQL.registerSchema('Blog', schema); AuthorizationGraphQL uses Meteor methods as the transport layer. So, we can get the Meteor userId inside the GraphQL schema with the See how to use it inside a schema. GraphQL.createLokkaClient() [client only]This API allows you to create a Lokka client. Then you can use it to interact with your schema.
BlogSchema = GraphQL.createLokkaClient('Blog');
GraphQL.bindData() [client only]This is a general purpose React utility to bind data to a react component. Specially for a stateless component via props. Let's say we've a component like this. const CurrentTime = ({time, text}) => (
<span>{text}: {time}</span>
); We can bind the time to this component like this: const onPropsChange = ((props, onData) => {
// start the setInterval
const handler = setInterval(() => {
let time = (new Date()).toString();
let text = "Current Time";
// check props and do some logic
if (props.timestamp) {
time = Date.now();
text = "Timestamp"
}
// send data like this
// if there's in an error,
// send an Error object instead null
onData(null, {time, text});
}, 1000);
// stop function to cleanup resources
const stop = () => {
clearInterval(handler);
}
// return the stop function which called when
// the component getting destroyed.
return stop;
});
const Clock = GraphQL.bindData(onPropsChange)(CurrentTime); Then we can render our clock like this: ReactDOM.render((
<div>
<Clock />
<Clock timestamp={true} />
</div>
), document.body);
Loading Component
const MyLoading = () => (
<div>...+++...</div>
);
const Clock = GraphQL.bindData(onPropsChange)(CurrentTime, MyLoading); Error Component Just like the loading component, you can send a custom component to handle the error message. For that, do it like this: const MyError = ({error}) => (
<div>{error.message}</div>
);
const Clock = GraphQL.bindData(onPropsChange)(CurrentTime, null, MyError); |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论