Wrapping a REST API in GraphQL

[dalgard]

The article Wrapping a REST API in GraphQL describes how to use a client-side schema to resolve queries against a REST endpoint.

The schema is inserted as a network layer in Relay – can something similar be achieved with Apollo Client?

[dalgard]

Seems easier than I expected: Custom network interface

[stubailo]

Yep, that's it! Very similar to the Relay approach.

[linonetwo]

Great, I'm currently seeking for this. @dalgard Have you tried it yet?

[stubailo]

By the way, if someone wants to write a post about this it would be awesome!

[dalgard]

@linonetwo Not yet. Don't know whether I'm going to need it within the next couple of months. Still interested, though!

[linonetwo]

OK I'm trying it...

what can be inferred from apollo's docs is just:

import { addQueryMerging } from 'apollo-client';

class REST2GraphQLInterface {

  query({ query, variables, debugName }) {
    return Promise.resolve({ data: {}, errors: [{ code: 0, msg: 'errorMsg' }] });
  }
}

export default addQueryMerging(REST2GraphQLInterface);

I need to refer to relay's doc for further implementation examples...

[linonetwo]

So I don't need a 「graphql」 package, instead a 「graphql-tool」 at the client side?

[linonetwo]

Well, I think writing REST2GraphQL on the client side is much similar to what we usually wrote on the server side.

The only difference is that we use the connector to get data from database usually, now we use the connector to get data from REST endpoint.

I'm not sure whether I'm on the right path or not.

[stubailo]

@linonetwo you're definitely on the right path. What you are basically doing is writing a "GraphQL server", but on the client, so any of the GraphQL server docs will apply.

You don't need apollo-server or express-graphql for this - those packages are for attaching GraphQL to a real web server, which you don't have or need on the client. You just need to get a GraphQLSchema instance and call it yourself via the graphql function from the graphql package.

[linonetwo]

Thanks for guiding.

Another question: One REST endpoint would give me tons of data. Typically if I want to fill in blanks for this type;

# /api/account/whoami
type User {
  login: Boolean!
  username: String!
  password: String!

  id: Int!
  name: String!

  companyId: Int
  companyName: String
  departmentId: Int
  departmentName: String
  role: String
}

I will write resolver functions, each will just getting small piece of data.
though /api/account/whoami will return

{
  "code": 0,
  "data": {
    "companyId": 1,
    "companyName": "Company1",
    "departmentId": 1,
    "departmentName": "工程部",
    "id": 7,
    "name": "用户3",
    "role": "Customer",
    "username": "Customer3"
  }
}

which covers many of fields of User type.

should I still write resolving functions for every field?
And addQueryMerging(REST2GraphQLInterface) will do some magic for this?

I think I can cache data inside connector.
if /api/account/whoami returns

{
  "code": 0,
  "data": {
    "companyId": 1,
    "companyName": "Company1",
    "departmentId": 1,
    "departmentName": "工程部",
    "id": 7,
    "name": "用户3",
    "role": "Customer",
    "username": "Customer3"
  }
}

and I only need departmentName and companyName for this time, I can cache the whole json inside User model, and set an expire time or so. When next query about role goto User model will hit this cache .

But it looks redundantly with apollo-client 's client side cache.

So my opinion is to simulate the batching again here. If two queries come together within 10ms, second one will hit the cache.

Another option is caching at Model level and use graphQL decorator or so, to pass an 'force fetch' argument to this level. In this way, "client side server" 's caching won't be obscure to user.

Which way is better still need experiment.

[linonetwo]

I will write a post after this...

I'm currently using「graphql」package to parse executeableSchema like this:

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

class REST2GraphQLInterface {
  query({ query, variables }) {
    return graphql(
      executableSchema,
      query,
      undefined, // should be rootValue here, I don'k know what its used for
      { 
        Config: new Config({ connector: serverConnector }),
        User: new User({ connector: serverConnector }),
      },
      variables
    );
  }
}

export default addQueryMerging(new REST2GraphQLInterface());

And it doesn't work, throwing Error: Must provide a schema definition from \node_modules\graphql\utilities\buildASTSchema.js

Maybe executableSchema is not what it wants?

[stubailo]

What is schema? perhaps it's not the right kind of object?

[stubailo]

Also, you don't need to write resolvers like ({ field }) => field - that's the default behavior. So you only need explicit resolvers for the case where you need to do some transformation on the data.

[linonetwo]

OK, My only reference is GitHunt... Learnt from it :

type Entry {
  repository: Repository!
  postedBy: User!
  createdAt: Float! # Actually a date
  score: Int!
  comments: [Comment]! # Should this be paginated?
  commentCount: Int!
  id: Int!
  vote: Vote!
}
`];

export const resolvers = {
  Entry: {
    repository({ repository_name }, _, context) {
      return context.Repositories.getByFullName(repository_name);
    },
    postedBy({ posted_by }, _, context) {
      return context.Users.getByLogin(posted_by);
    },
    comments({ repository_name }, _, context) {
      return context.Comments.getCommentsByRepoName(repository_name);
    },
    createdAt: property('created_at'),
    commentCount({ repository_name }, _, context) {
      return context.Comments.getCommentCount(repository_name) || constant(0);
    },
    vote({ repository_name }, _, context) {
      if (!context.user) return { vote_value: 0 };
      return context.Entries.haveVotedForEntry(repository_name, context.user.login);
    },
  },

that
every field we are using should a resolver function, or we can't get data for it.

Are there any edge case learning material?