client-side-graphql's Introduction

GraphQL without a server

TL;DR

You do not need a GraphQL server to use the GraphQL APIs on the client. (Example)
You do not need a separate GraphQL server to stitch the schemas of two existing GraphQL APIs. (Example)

Introduction

GraphQL is essentially a syntax that describes how to ask for data. A GraphQL API is something that accepts queries in GraphQL syntax and resolves them to whatever is asked by a query. Traditionally, this are written on a server and exposed on a single endpoint. However, since the growth of Apollo Client, and the tools around it, this GraphQL wrapper can be written on the client as well.

Analogy

Examples

Simple GraphQL schema

This example makes a simple hello-world GraphQL schema.

import { makeExecutableSchema } from 'graphql-tools';
import { SchemaLink } from 'apollo-link-schema';
import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';

const typeDefs = `
  type Hello {
    message: String
  }
`;

const resolvers = {
  Query: {
    message: (root, args, context, info) => "hello-world"
  }
};

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

const client = new ApolloClient({
  link: new SchemaLink({ schema }),
  cache: new InMemoryCache()
})

// You can use this client in your app and it will work like any other GraphQL server

Check out this example where we have written a GraphQL wrapper over the Meta weather REST API.

Schema Stitching

This is an example of stitching two remote GraphQL schemas.

import { makeRemoteExecutableSchema, introspectSchema, mergeSchemas } from 'graphql-tools';
import { SchemaLink } from 'apollo-link-schema';
import ApolloClient from 'apollo-client';

const uri1 = 'https://server1.com/graphql';
const uri2 = 'https://server2.com/graphql';

const getRemoteExecutableSchema = async (uri) => {
  const httpLink = new HttpLink({ uri });
  const remoteSchema = await introspectSchema(httpLink);
  return makeRemoteExecutableSchema({ schema: remoteSchema, link: httpLink });
}

const executableSchema1 = await getRemoteExecutableSchema(uri1);
const executableSchema2 = await getRemoteExecutableSchema(uri2);

const newSchema = mergeSchemas({
  schemas: [
    executableSchema1,
    executableSchema2
  ]
});

const client = new ApolloClient({
  link: new SchemaLink({ schema: newSchema }),
  cache: new InMemoryCache()
});

// You can use this client in your app and it will work like any other GraphQL server

You can also have custom resolvers if you want to link your schemas in some way. You just have to add them to the resolvers field in the mergeSchemas function.

const resolvers = {
  Query: {
    ...
  },
  Mutation: {
    ...
  }
}

const newSchema = mergeSchemas({
  schemas: [
    executableSchema1,
    executableSchema2
  ],
  resolvers: resolvers
});

Check out this example where we stitch a remote GraphQL schema with a local GraphQL schema.

client-side-graphql's People

Contributors

Stargazers

Watchers

client-side-graphql's Issues

possible to add to context?

Similar to graphql server, can we add something to the context which could be used for resolver.

For example

// resolvers -> get where on earth id -> get consolidated_weather data and return
const resolvers = {
  Query: {
    cityWeather: (root, args, { weatherCtx } , info) => {
      return weatherCtx.getWoeid(args.city_name).then( (response) => {
        if (!response) {
          return null;
        }
        return weatherCtx.getWeather(response).then( (weather) => {
          if (!weather) {
            return null;
          }
          let consolidated_weather = weather.consolidated_weather;
          // check for args applicable_date to apply filter
          consolidated_weather = args.applicable_date ? consolidated_weather.find(item => item.applicable_date === args.applicable_date) : consolidated_weather[0];
          const respObj = {'temp': consolidated_weather.the_temp.toString(), 'min_temp': consolidated_weather.min_temp.toString(), 'max_temp': consolidated_weather.max_temp.toString(), 'city_name': weather.title, 'applicable_date': consolidated_weather.applicable_date};
          return respObj;
        });
      });
    }
  },
};

useQuery hooks

Hi,

What's your opinion about the useQuery hook?
https://www.apollographql.com/docs/react/data/queries/

Do you think this repo should be updated to be use the hooks syntax rather than the <Query component?

Recommend Projects

hasura / client-side-graphql Goto Github PK

client-side-graphql's Introduction

GraphQL without a server

TL;DR

Introduction

Analogy

Examples

Simple GraphQL schema

Schema Stitching

client-side-graphql's People

Contributors

Stargazers

Watchers

Forkers

client-side-graphql's Issues

possible to add to context?

useQuery hooks

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent