Fake GraphQl Data API

GraphQL Client Sandbox full of predefined data.

GraphQL Static API allow to fetch data using Graph query language.
You can visit official GraphQL website to get more knowledge about this technology https://graphql.org/

Base GraphQl URI

https://dummyapi.io/data/graphql

GraphQL Auth Header

It is required to set app-id Header for all requests served via graphql endpoint.
You can get App ID value on your personal account page.
Example: app-id: 0JyYiOQXQQr5H9OEn21312

You can find the example code on the bottom of the page.
It is detailed shows a process of connection setup and query.

GraphQl Queries List

type Query {
user(id: String!): UserFull
users(page: Int, limit: Int): UserList!
tags(page: Int, limit: Int): TagList!
post(id: String!): Post
posts(page: Int, limit: Int):PostList!
postsByUser(userId: String!, page: Int, limit: Int): PostList!
postsByTag(tagName: String!, page: Int, limit: Int): PostList!
commentsByPost(postId: String!, page: Int, limit: Int): CommentList!
commentsByUser(userId: String!, page: Int, limit: Int): CommentList!
}

GraphQl Types Schema

type UserLocation
type User
type UserFull
type Post
type Comment
type UserList
type PostList
type TagList
type CommentList

GraphQl Queries Example

React/Javascript

We will use @apollo-client react library in our example. But you can select any you like.

Setup Apollo client Provider, it is necessary to use React Hook API.

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import { App } from './app';

const GQL_URI = 'https://dummyapi.io/data/graphql';

const client = new ApolloClient({
    uri: GQL_URI,
    cache: new InMemoryCache(),
    headers: {
        'app-id': '{{APP-ID}}'
    }
});

ReactDOM.render(
  <ApolloProvider client={client}>
      <App />
  </ApolloProvider>,
  document.getElementById('root')
);

Execute GraphQL query using useQuery hook.

import React, { useEffect, useState } from 'react';
import { useQuery, gql } from '@apollo/client';

const QUERY = gql`
    {
        commentsByUser(userId: "ayCTeEVLIWD1EXfwJ5cZ", limit: 10, page: 1) {
            data {
                id
                message
                publishDate
                owner {
                    id
                    firstName
                    lastName
                }
            }
            total
            page
            limit
            offset
        }
    }
`;

const App = () => {
    const { loading, error, data } = useQuery(QUERY);

    return (
        <React.Fragment>
            {loading && (<h2>Loading...</h2>)}
            {JSON.stringify(data)}
            {JSON.stringify(error)}
        </React.Fragment>
    );
};

export { App };
Privacy PolicyCookie PolicyTerms and Conditions