Apollo Client 2 + React 的你好世界示例？

Question

我正在尝试 return 一个带有 React 和 GraphQL 的字符串，但我在第一阶段遇到了困难。这是我的尝试：

import { makeExecutableSchema } from 'graphql-tools';

const typeDefs = `
  type Query {
    author: Person
  }
  type Person {
    name: String
  }
`;

const resolvers = {
    Query: {
        author: { name: 'billy' },
    },
};

const schema = makeExecutableSchema({
    typeDefs,
    resolvers,
});

createApolloServer({ schema });

这是我对该代码的理解：

在我的架构中，我定义了一个名为 author 的 Query，它应该 return 和 Person。

A Person 有一个名称字段，它是一个字符串。

我的解析器有一个名为 author 的 Query，它应该 return 一个名称字段值为 'billy'

的对象

但是在我的 Graphicool 浏览器工具中这个查询：

query {
  author{
     name
  }
}

Returns这个：

{
  "data": {
    "author": null
  }
}

Answer 1

import { createApolloServer } from 'meteor/apollo';
import { makeExecutableSchema } from 'graphql-tools';
import merge from 'lodash/merge'; // will be useful later when their are more schemas 

import GroupsSchema from './Groups.graphql';
import GroupsResolvers from './resolvers';

const typeDefs = [GroupsSchema];
const resolvers = merge(GroupsResolvers);

const schema = makeExecutableSchema({
    typeDefs,
    resolvers,
});

createApolloServer({ schema });

在./Groups.graphql:

type Query {
    hi: String
    groups: [Group]
    group: Group
}

type Group {
    name: String
}

在“./resolvers”中：

export default {
    Query: {
        hi() {
            return 'howdy';
        },
        groups() {
            return [{ name: 'one', _id: '123' }, { name: 'two', _id: '456' }];
            // return Groups.find().fetch();
        },
        group() {
            return { name: 'found me' };
        },
    },
};

在 React 组件中：

const mainQuery = gql`
    {
        groups {
            name
        }
    }
`;

export default graphql(mainQuery)(ComponentName);

Answer 2

解析器是 GraphQL 在解析特定字段时调用的函数。这意味着您的 resolvers 对象应该看起来更像这样：

const resolvers = {
  Query: {
    author: () => ({ name: 'billy' }),
  },
}

或者，

const resolvers = {
  Query: {
    author() {
      return { name: 'billy' }
    },
  },
}

您可以check out the docs了解更多信息。

Apollo Client 2 + React 的你好世界示例？

Hello world example for Apollo Client 2 + React?

graphql

apollo-client