Package helping you speed up the frontend development with Apollo client when the backend implementation is lacking behind.

While working with graphql, I had a realization that it's much easier to define the graphql queries/mutations only after the forntend feature is partially implemented. The issue was, how do you fake the apollo queries in a simple way? So, after the backend is implemneted you have to do minimal changes on the frotnend?

The result is a super simple quick package for faking apollo client queires for faster prototyping.

The package is assuming you use react react-apollo and grapqhl-tag (apollo-boost has graphql-tag included)

npm install --save use-apollo-mock

Largly inspirate from react-apollo-hooks, you simply provide the query (you will later use for real) to the userQueryMock hook and also provide fake data through options.

import React from 'react';
improt { useQueryMock } from 'use-apollo-mock';

// Standard graphql query. In whatever way you write it
const QUERY = gql`
  query myQuery {
    myQuery {
      data
    }
  }
`;

// This is the fake data we want to get back. Pretending
// we are receiving it from the server. 
// Notice I follow the exact same shape of the query
// to replicate the shape the server would send back.
const fakeData = {
  myQuery: {
    data: 'awesome'
  }
}

// Use in a React component as a hook. 
function Component() {
  const { data, loading, error } = useQueryMock(QUERY, {
    data: fakeData
  });
  
  return null;
}
 

This will immitate the loading state and will return you teh fake data.

You can take it one step further and immitate the caching as well. Just wrap your app with a ApolloMockProvider. it doesn't need anything else.

import React from 'react';
import { ApolloMockProvider } from 'use-apollo-mock`;

function App() {
  return (
    <ApolloMockProvider>
      <YourApp />
    </ApolloMockProvider>
  )
}

You can also provide an erro mock, to pretend you got an error from the server. Just use the same principal from step 2:

// Use in a React component as a hook. 
function Component() {
  const { data, loading, error } = useQueryMock(QUERY, {
    data: fakeData,
    error: new Error('Something bad happened')
  });
  
  return null;
}

Please keep in mind this is work in progress and is meant to be a simple quick and dirty help for prototyping. However, if you find this package helpful and want to improve it, feel free to open a issue or create a pull request.

At the moment it only supports the "Query". It dooesn't fake "Mutation". I might add it when I have a little bit more time :)