Calculate Your Discount

Download Desktop App

Desktop App 🖥️

## Volume discounts

Unlock special discounts with volume licensing! The larger your team, the more you save on both lifetime licenses and update packages. Get better deals as your team grows and get all the features at an even lower price.

|                                         | 1-3<br />seats                             | 4-8<br />seats                             | 9-16<br />seats                            | 17+<br />seats                             |
| :-------------------------------------- | ------------------------------------------ | ------------------------------------------ | ------------------------------------------ | ------------------------------------------ |
| **New license**<br /> Price per user    | <span class="mainPrice">$199.00</span>     | <span class="mainPrice">$179.00</span>     | <span class="mainPrice">$149.00</span>     | <span class="mainPrice">$128.00</span>     |
| **Update package**<br /> Price per user | <span class="secondaryPrice">$64.00</span> | <span class="secondaryPrice">$56.00</span> | <span class="secondaryPrice">$48.00</span> | <span class="secondaryPrice">$40.00</span> |

All the Features with a Single One-Time Payment!

Lifetime License

For GraphQL cache can significantly improve performance and reduce redundancy, particularly when the same data is queried multiple times within a short timeframe. In this post, I'll go over implementing caching using [GraphQL Zeus](/docs/zeus) to fetch data from our custom CMS. No worries this can also be applied just as effectively to other GraphQL APIs, such as Hygraph or Hasura. Whether you’re working with a headless CMS, an e-commerce backend, or any other GraphQL-powered service, caching is just as important in every scenario and the implementation should look very similar.

## Why Add Caching?

Caching provides a number of advantages like:
 -  Reduced Server Load: By serving repeated requests from the cache, you avoid making unnecessary calls to the GraphQL server, which can be essential for scaling applications with high traffic.
 - Improved Performance: frequently requested data can be served directly from memory, reducing query response time significantly
 - Cost Efficiency: if your GraphQL API usage is metered (e.g., cloud-based APIs), caching significantly reduces the number of queries made, saving on usage costs

## [GraphQL Zeus](/docs/zeus) query example

Let’s start with a simple query I made using [GraphQL Zeus](/docs/zeus), which fetches homepage data from our CMS:

```ts
export const getHomepageData = async () => {
  try {
    const result = await chain('query')({
      onehomepageBySlug: [{ slug: 'home' }, HomepageDataSelector],
    });
    return result;
  } catch (error) {
    console.error('failed to fetch home data', error);
  }
};
```

This query retrieves all the homepage data at once and passes it to the relevant components. This allows users to update the homepage content directly through the CMS without needing to modify any code. Currently, this function is called in server-side props, meaning it triggers an API call every time the page is refreshed or visited.

To optimize this and reduce redundant API calls, we’ll implement caching by using the [node-lru-cache](https://github.com/isaacs/node-lru-cache) library.

## LRU cache

LRU stands for "Least Recently Used," a caching strategy that automatically removes the least recently accessed items when the cache reaches its limit. The node-lru-cache library offers several configuration options, but in our case to set up a basic GraphQL cache, we only need two key settings:

 - `ttl` (Time to Live): This setting defines how long an item stays in the cache before it’s considered expired, specified in milliseconds.
 - `ttlAutopurge`: When enabled, this option automatically deletes expired items from the cache. Without it, expired items are only purged when the cache is next accessed which can potentially lead it to grow unbounded.
 
```ts
import { LRUCache } from 'lru-cache';

const cache = new LRUCache({
  ttl: 1000 * 60 * 5, // Set time to live to 5 minutes
  ttlAutopurge: true,  // Automatically clean up expired entries
});
```

## Caching the query

To cache the query I mentioned earlier, we need to do three simple things:
1. Set up a cache key: This helps the cache know which entry to return when the same data is requested. You can name the key however you like, but it has to be unique to avoid conflicts.
2. Check if the cache contains the result: If the cache has the entry for that key, return the cached result.
3. Store the query result in the cache: After fetching the data, save the result in the cache for future use.

```ts
export const getHomepageData = async () => {
  const cacheKey = 'homepageData'; // Cache key for this entry
  if (cache.has(cacheKey)) { // Check if the cache contains this key
    return cache.get(cacheKey) as { onehomepageBySlug: HomepageDataType }; // Return cached result
  } 
  try {
    const result = await chain('query')({
      onehomepageBySlug: [{ slug: 'home' }, HomepageDataSelector],
    });
    cache.set(cacheKey, result); // Store query result in the cache
    return result;
  } catch (error) {
    console.error('failed to fetch home data', error);
  }
};
```

This approach results in two scenarios:

 - First visit: The query runs, fetches the data, and caches it for future use.
 - Subsequent visits (within the TTL): The cached result is returned, avoiding the need to make a new API request.

## Query with params (slug, locale)

As mentioned earlier, the cache key must be unique to avoid conflicts. This is especially important for queries that include parameters, such as `locale` (for localization) or `slug` (for specific blog pages). Without unique cache keys, you may end up with the same content being served for different locales or blog pages. To avoid this, it's best to use a dynamic cache key based on the query parameters.

```ts
export const getBlogpostBySlug = async ({ slug }: { slug: string }) => {
  const cacheKey = `Blogpost:${slug}`; // Unique cache key based on the slug
```

By using this dynamic approach, we ensure that the correct data is returned for the given slug. If you were to use a static cache key like 'blogpost', you'd always get the first cached blog post, regardless of which slug is provided. The same issue would arise with localization: without unique keys, you'd end up serving the wrong content for different locales.

## Its all about performance

GraphQL is all about efficiency — retrieving only the data you need (unlike REST). It makes sense to take that a step further to further enhance performance. With a GraphQL cache setup like this we can reduce redundant API calls and significantly speed up queries, especially for frequently accessed data like homepage content or blog posts. Dynamic cache keys based on query parameters ensure that the data is correctly localized or filtered according to specific slugs and [GraphQL Zeus](/docs/zeus) and selectors keep everything type-safe. Together this solution can greatly improve your app's speed and scalability. As mentioned, even if you're not using [GraphQL Zeus](/docs/zeus), the implementation should still be very similar to the above, so give it a try!
  

GraphQL cache: using LRU cache with GraphQL Zeus

# React Native monorepo with shared components & TypeScript

To start we should ask a simple question: why should I use a monorepo for React Native apps? It's actually very useful when you have two (or more) similar applications. Monorepos enable sharing of components, functions and logic between all of the included applications. This can unlock a variety of benefits like core sharing, simplified ci/cd process and consistent tooling.

### Setting up workspaces with Yarn

When creating a monorepo for react native applications, it is better to avoid using nohoist because we don't need duplicates inside the root level and inside the project level `node_modules`.

### Project structure

Our projects need to be divided into subfolders. We treat them as separate entities. Here’s an example of how our project structure can look like:

![Project structure](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor1-1733901838493.png)

### Creating a package.json file in the root directory

1. open your terminal and go to the root directory `cd my-app`,
2. create a package.json file with `yarn init -y`,
3. open and check your package.json file. It should look something like this:

![package.json file](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor2-1733901910541.png)

* Private: true is required. That's very important because we don't want to make our workspaces public.
* Name: the name of your monorepo.
* Workspaces: our workspace with the projects structured in a tree. For now, it's okay as is.

### Creating React Native projects

To create React Native projects we can use the following commands:

```bash
cd packages
npx react-native init FirstApp --directory app1 --template react-native-template-typescript
npx react-native init SecondApp --directory app2 --template react-native-template-typescript
```

If your app names and directories match you can use this instead:

```bash
cd packages
npx react-native init app1 --template react-native-template-typescript
npx react-native init app2 --template react-native-template-typescript
```

where `app1` and `app2` are the names of both our apps and their directories.

Most likely your apps have now been created but pods will not install. No worries, we’ll fix this in the next step:

### IOS configuration

1. Open `Podfile` go into your app and change paths to the `node_modules`

![Node modules paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor3-1733901985977.png)

1. Open your terminal and install pods. If you are in the packages/app\* folder run:

```bash
	cd ios
	pod install
```

1. Open XCode and your project, select the Project navigator and click on the name of your project. This will open project settings.

![XCode](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/screen1-1730846450836.webp)

1. Click `Build Phases`, open `Bundle React Native code and images` and change the script paths:

![script paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor4-1733901994852.png)

![XCode](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/screen2-1730846453820.webp)

**!Remember to repeat this for each app in your monorepo!**

### Android setup

**For React Native below 0.71**

1. Open your `build.gradle` file and change the paths to `node_modules`

![build file](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor5-1733902003511.png)

1. Open your `settings.gradle` file and change the paths to `node_modules`

![settings file](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor6-1733902010604.png)

1. Open your `build.gradle` and override the default location of the cli

![cli path](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor7-1733902017735.png)

In the same file change these lines:

![react paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor8-1733903068544.png)

![react paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor9-1733903078072.png)

**For React Native above 0.71**

1. Go to your `build.gradle` file
2. Find and edit the following:

![hermesc](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor10-1733903086173.png)

1. then add the codegen directory path

![codegen dir](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor11-1733903092880.png)

1. and this:

![build path](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor12-1733903099962.png)

**!Remember to repeat this for every app in your monorepo!**

### Android setup

**For React Native below 0.71**

1. Open your `build.gradle` file and change the paths to `node_modules`

![node modules paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor13-1733903126778.png)

1. Open your `settings.gradle` file and change the paths to `node_modules`

![node modules paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor14-1733903526209.png)

1. Open your `build.gradle` file again and override the default location of the cli

![cli path](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor15-1733903532696.png)

In the same file change these lines:

![react paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor16-1733903539316.png)

![react paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor17-1733903546640.png)

**For React Native above 0.71**

1. Go to your `build.gradle` file
2. Find and edit the following:

![hermesc](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor18-1733903554152.png)

1. then add this

![build paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor19-1733903567091.png)

1. and this

![build paths](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor20-1733903573867.png)

**!Remember to repeat this for every app in your monorepo!**

### Metro configuration

Now we should indicate for metro where `node_modules` are located. Go to the `metro.config.js` file and add `watchFolders`:

![metro config](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor21-1733904224011.png)

### Shared package

Inside the shared folder, create a `package.json` file.

```bash
	cd shared
	yarn init -y
```

Your `package.json` file should look something like this:

![package json](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor22-1733904230203.png)

Close your `package.json` and now let's create a `tsconfig.json` file:

![ts config](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor23-1733904236292.png)

Now go into your shared folder, and create an src folder there. Its structure should look something like mine:

![structure](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor24-1733904242714.png)

Where `Test.tsx` is a React Function component :)

Now, we can export this via `index.ts` in a `shared` folder.

Now let's create a build of our `shared` directory:

```bash
yarn build
```

With that, we have finished setting up our `shared` folder. Now we should indicate this directory to our applications. So now we need to add our `shared` dependency to the `package.json` file in all our applications:

![dependency](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor25-1733904248620.png)

and for `metro.config.js`:

![metro config](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/monor26-1733904254436.png)

Then go back into your root directory and run:

`yarn`

Now we should be able to import things from `shared` directly into our React Native Apps:

```ts
import React, { type PropsWithChildren } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'Libraries';

import { Test } from '@my-app';

const Section: React.FC<
  PropsWithChildren<{
    title: string;
  }>
> = ({ children, title }) => {
  const isDarkMode = useColorScheme() === 'light';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: !isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={!isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <Test />
        <View
          style={{
            backgroundColor: !isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
```

**And that’s how it works! Enjoy!**

React Native monorepo with shared components & TypeScript

### The importance of a typeface

Communication plays a vital role in web design. In the web context communication usually means text. As the major part of the information that a web site is trying to communicate to an end-user is in the form of written language, modern web design started to put more and more pressure on typography which started becoming a principal element of [designs system](https://graphqleditor.com/blog/Design-System/) in the last years.

Good typography is a factor that distinguishes a mediocre website from a decent one by making the act of reading more pleasant, which eases communication of key content to a user.

##### Source: [Understanding typography](https://m2.material.io/design/typography/understanding-typography.html#type-properties)

### Typography JS

Implementing a tiny design change can become a real nightmare as it might turn into making tons of recalculations & [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) changes. So how to keep your [Typography](https://m2.material.io/design/typography/understanding-typography.html) tight?

Typography.js comes with help, making it easier to create a unique design for your project as all you need to do is provide a configuration to the [Typography.js API](https://github.com/KyleAMathews/typography.js) and it will generate CSS for all block and inline elements. The TypoGraphy.js will take care of many details i.e. making sure that the spacings are nice, which will enhance the general UX value of your product.

### Usage

**Typography.js themes** are simple Javascript objects & **Typography Plugins** are functions extending or modifying the core Typography engine. These functions can modify the styles of different website elements.

Let's take a look at basic JS usage:

```ts
import Typography from 'typography';

const typography = new Typography({
  baseFontSize: '18px',
  baseLineHeight: 1.45,
  headerFontFamily: [
    'Avenir Next',
    'Helvetica Neue',
    'Segoe UI',
    'Helvetica',
    'Arial',
    'sans-serif',
  ],
  bodyFontFamily: ['Georgia', 'serif'],
  // See below for the full list of options.
});

// Output CSS as string.
typography.toString();

// Or insert styles directly into the <head> (works well for client-only
// JS web apps.
typography.injectStyles();
```

### How to use themes

Currently, there are around 30 themes maintained, that are ready to pick up for your project. The themes are published separately as NPM packages. Let's take a look at themes usage on a [typography-theme-github](https://github.com/KyleAMathews/typography.js/tree/master/packages/typography-theme-github) example. First, you need to save the package to your project using:

```ts
npm install --save typography-theme-github
```

Then import and pass into Typography when initializing

```ts
import Typography from 'typography';
import githubTheme from 'typography-theme-github';

const typography = new Typography(githubTheme);
```

As previosuly mentioned, themes are javascript object that can be easily custamized i.e. if you want to change the font size of a github theme just:

```ts
import Typography from 'typography';
import funstonTheme from 'typography-theme-github';
githubTheme.baseFontSize = '22px'; // was 20px.

const typography = new Typography(githubTheme);
```

You can play with available themes here:
[http://kyleamathews.github.io/typography.js/](http://kyleamathews.github.io/typography.js/)

![Live demo sample](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/sample-1730835122886.webp)

Handling web fonts with TypoGraphy.js

With Visual Graph, you can explore and onboard large schemas quickly and efficiently. It also includes visual schema creator.



Visual Graph

The API platform is a tree-based GraphQL query builder. It lets you build queries with just a few simple clicks and input data in easy-to-navigate user friendly forms.

API Console

Federation allow you to import one schema to another. You cannot see the imported nodes directly in the code editor but you can see them in the Graph view and how they merge when GraphQL federation happens.



Supergraph ready

With the self-deployed cloud backend, you can query your GraphQL Schema and get type-safe responses right away, immediately after starting your project.



Mock GraphQL APIs


Privacy policy

Terms & Conditions

Contact us

Company

Videos

Roadmap

Changelog

Product

Docs

Blog

GraphQL Playground

GraphQL Servers

Resources

GraphQL IDE

GraphQL

GraphQL API

GraphQL Federation

Tutorials

GraphQL Tools

Graph QL

GraphQL Visualisation

About us

Pricing

Community

Zeus

I like the intuitive interface and the ability to visualize complex schemas in a clear, graphical manner. It makes designing and debugging GraphQL APIs much easier. Additionally, the auto-completion and built-in testing tools save a lot of time during development. Sometimes, the tool can be a bit laggy with larger schemas, and the collaborative features could be more robust. It would also be great if there were more integrations with other development tools.

One and the only visual display for GraphQL Relations and relations at all. What if SQL has this kind of tool?

I'm lovin the @HasuraHQ + GraphQL Zeus combo so far, writing a query is still a bit verbose but at least I get type hints.



Easy to create types, queries, mutations, and interfaces in Graphql. We can resolve the error while creating the GraphQL schema. We can our schema and connections between types and queries auto-updated. Either we can create our own schema or we can import and upload from Graphql. We can also create fake API, Rest API.



Understand your schema