DEV Community: Tommaso De Rossi

You don't need Apollo to use Graphql in react

Tommaso De Rossi — Sat, 25 Jan 2020 14:57:56 +0000

I have always used Apollo to make graphql requests inside of react, usually doing something like this

import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const GET_GREETING = gql`
  query getGreeting($language: String!) {
    greeting(language: $language) {
      message
    }
  }
`;

function Hello() {
  const { loading, error, data } = useQuery(GET_GREETING, {
    variables: { language: 'english' },
  });
  if (loading) return <p>Loading ...</p>;
  return <h1>Hello {data.greeting.message}!</h1>;
}

The problem with this however is that Apollo has become really bloated over time, making its bundle size big and its API unfriendly.
Creating a simple grahpql client is a pain:

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

// Instantiate required constructor fields
const cache = new InMemoryCache();
const link = new HttpLink({
  uri: 'http://localhost:4000/',
});

const client = new ApolloClient({
  // Provide required constructor fields
  cache: cache,
  link: link,

  // Provide some optional constructor fields
  name: 'react-web-client',
  version: '1.3',
  queryDeduplication: false,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
    },
  },
});

Also the bundle size is pretty big and the UX is not great.

So i decided to find a better way to call a simple Graphql API.

I found a simpler Graphql client, called grpahql-request, with mush smaller bundle size and better UX.

import { GraphQLClient } from 'graphql-request'

const graphQLClient = new GraphQLClient('https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr', {
  headers: {
    authorization: 'Bearer MY_TOKEN',
  },
})

const query = /* GraphQL */ `
  {
    Movie(title: "Inception") {
      releaseDate
      actors {
        name
      }
    }
  }
`
graphQLClient.request(query).then(console.log)

This code is a lot simpler as you can see, the same library works in the server too so you can do sse super easily.

Then i needed a glue code that can let me use the same hooks API that Apollo uses but with any promise, so i release react-extra-hooks on npm.
This package contains some utility hooks to be used in react, among these there is usePromise:

import { usePromise } from 'react-extra-hooks'
import React from 'react'
import { GraphQLClient } from 'graphql-request'

const graphQLClient = new GraphQLClient('https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr',)

const query = /* GraphQL */ `
  {
    Movie(title: "Inception") {
      releaseDate
      actors {
        name
      }
    }
  }
`

const App = () => {
    const { result, loading, error } = usePromise(() => graphQLClient.request(query))
    if (loading) {
        return <>loading</>
    }
    return <div>{result.Movie.releaseDate}</div>
}

As you can see the usage is similar to Apollo but we are using a general usePromise function instead of useQuery.

The same thing can be done with mutations, using another hook, useLazyPromise:

import { usePromise } from 'react-extra-hooks'
import React from 'react'
import { GraphQLClient } from 'graphql-request'

const graphQLClient = new GraphQLClient('https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr',)

const query = /* GraphQL */ `
    mutation {
      createActor(name: "dsf") {
        id
      }
    }
`

const App = () => {
    const [execute, {result, loading, error }] = useLazyPromise(() => graphQLClient.request(query))
    if (loading) {
        return <>loading</>
    }
    if (result) {
        return <div>{result.id}</div>
    }
    return (
        <div>
            <button onClick={execute}>execute request</button>
        </div>
    )
}

In my opinion this is much better than Apollo, the bundle size is smaller and the code is more general.

Best way to glue Graphql APIs with Apollo Federation

Tommaso De Rossi — Sun, 27 Oct 2019 14:02:07 +0000

Apollo federation is sure the best way to glue together many graphql services, to add support for apollo federation is super easy:

const { ApolloServer, gql } = require("apollo-server");
const { buildFederatedSchema } = require("@apollo/federation");

const typeDefs = gql`
  ...
`;

const server = new ApolloServer({
  schema: buildFederatedSchema([
    {
      typeDefs,
      resolvers: {
        Query: {
          // ...
        },
      }
    }
  ])
});

server.listen({ port: 80 }).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

The server above can then be integrated in a gateway using apollo server with many other related services, the Query and Mutation types will be merged and the types with same name will be glued together in the unified schema gateway.

But how should i create this gateway?
You could write one yourself using the @apollo/gateway npm library only to find out that you should also handle the forwarding of headers and restart the service when other services schema changes.

Well you don't need to waste your time because i already wasted mine just for you.
You can use my reusable docker image with docker-compose as follows:


version: '3'

services:
    a:
        build: ./a # one service implementing federation
    b:
        build: ./b
    gateway:
        image: xmorse/apollo-federation-gateway
        ports:
            - 8000:80
        environment: 
            CACHE_MAX_AGE: '5' # default cache
            ENGINE_API_KEY: '...' # to connect to the apollo engine
            POLL_INTERVAL: 30 # to update services changes
            URL_0: "http://a"
            URL_1: "http://b"
            # you can also add other services outside docker

Please star the github repo if you are using the image so i can fulfil my pathological stars thirst.

Instant Graphql API for MongoDb with Mongoke

Tommaso De Rossi — Sun, 27 Oct 2019 13:35:04 +0000

When creating a new project (usually a web service of some sort) i try to create a MVP (minimum viable product) as fast as possible.
To do that i try to use tools that generate code for me or speed up development.
One task that always takes a lot of time is the creation of the graphql query layer: creating the graphql service, connect it to the database and add authorization.

This task is so boring that i decided to create a service that does it automatically for me.
So i created Mongoke, it is a docker image that generates a totally functional graphql api for you.
Mongoke generates a service written in python that supports among the many features:

powerful optimized queries
relay style pagination
authorization via your jwt
apollo federation to be able to integrate other graphql services

Mongoke works thanks to a yaml configuration like the following:

# ./mongoke.yml
skema: |
    User:
        _id: ObjectId
        username: Str
        email: Str
    BlogPost:
        _id: ObjectId
        author_id: ObjectId
        title: Str
        content: Str
        tags: [
            code: Str
        ]
types:
    User:
        collection: users
    BlogPost:
        collection: posts

relations:
    -   field: posts
        from: User
        to: BlogPost
        relation_type: to_many
        where:
            author_id: ${{ parent['_id'] }}

Here we are configuring a graphql service to create tha api of a blog site.
The configuration is divided in 3 main steps:

skema: This is where you describe the mongodb schema, it is written in the skema language, a DSL that compiles to grpahql and json-schema. The syntax is quite simple, object types are defined just like in yaml and you can also write inline list types. The skema built in types are Str, Int, Float, Bool, Any and Mongoke adds support for the mongodb ObjectId type.
types: here we connect the database types to their collection names, you can add authorization guards here.
relations: here are declared the relations to add to other types, to connect the different types you write the where query and you can evaluate the python code inside ${{ }} to access the connected type.

Then to start the graphql api you use docker-compose with the docker mongoke image, here i am also using the mongoke/populate-mongo image that populates the mongodb database with mock data generated from the above configuration.


version: '3'

services:
    mongoke:
        ports:
            - 8090:80
        image: mongoke/mongoke:latest
        environment: 
            - DB_URL=mongodb://mongo/db
        volumes: 
            - ./mongoke.yml:/conf.yml
    populate-db:
        image: mongoke/populate-mongo
        volumes:
            - ./mongoke.yml/:/conf.yml
        environment:
            - DB_URL=mongodb://mongo/db
    mongo:
        image: mongo
        logging: 
            driver: none

Then execute docker-compose up and you have a working graphql api at http://localhost:8090/graphiql

This is an example query that you can execute:

{
  user(where: {username: {neq: "hidden"}}) {
    username
    email
    posts(first: 10, cursorField: title) {
      nodes {
        title
        tags {
            code
        }
      }
    }
  }
}

You can extend the configration above to add authorization, more relations, more complex simply changing the yaml config and relaunching docker-compose.

See more examples and documentation on github