Building Dynamic Apps with Contensa's GraphQL API

GraphQL has revolutionized how we build and consume APIs. In this guide, we'll explore how to leverage Contensa's GraphQL API to build dynamic, performant applications.

Why GraphQL?

GraphQL offers several advantages over traditional REST APIs:

• Precise Data Fetching: Request exactly what you need, nothing more
• Single Endpoint: One endpoint for all your data needs
• Strong Typing: Built-in type system and validation
• Real-time Capabilities: Subscriptions for live data
• Excellent Developer Experience: Introspection and powerful tooling

Setting Up Your GraphQL Client

Installation

bash
npm install @apollo/client graphql

Configuration

typescript
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: 'https://api.contensa.io/graphql',
});

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: \`Bearer \${process.env.CONTENSA_API_KEY}\`,
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

Querying Content

Basic Query

typescript
import { gql, useQuery } from '@apollo/client';

const GET_POSTS = gql`
  query GetPosts($limit: Int, $offset: Int) {
    blogPosts(limit: $limit, offset: $offset) {
      items {
        id
        title
        slug
        excerpt
        publishedDate
        author {
          name
          avatar
        }
      }
      total
      hasMore
    }
  }
`;

function BlogList() {
  const { loading, error, data } = useQuery(GET_POSTS, {
    variables: { limit: 10, offset: 0 },
  });

  if (loading) return <Skeleton />;
  if (error) return <Error message={error.message} />;

  return (
    <div>
      {data.blogPosts.items.map(post => (
        <BlogCard key={post.id} post={post} />
      ))}
    </div>
  );
}

Advanced Filtering

graphql
query GetFilteredPosts(
  $category: String
  $tags: [String!]
  $search: String
) {
  blogPosts(
    filter: {
      category: { eq: $category }
      tags: { in: $tags }
      title: { contains: $search }
    }
    sort: { publishedDate: DESC }
  ) {
    items {
      id
      title
      category
      tags
    }
  }
}

Mutations

Create and update content programmatically:

typescript
const CREATE_POST = gql`
  mutation CreatePost($input: BlogPostInput!) {
    createBlogPost(input: $input) {
      id
      title
      slug
      publishedDate
    }
  }
`;

const [createPost, { loading }] = useMutation(CREATE_POST);

const handleSubmit = async (formData) => {
  await createPost({
    variables: {
      input: {
        title: formData.title,
        content: formData.content,
        authorId: formData.authorId,
      }
    }
  });
};

Performance Optimization

Caching Strategy

typescript
const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        blogPosts: {
          keyArgs: ['filter', 'sort'],
          merge(existing, incoming, { args }) {
            const merged = existing ? existing.items.slice(0) : [];
            const offset = args?.offset || 0;
            for (let i = 0; i < incoming.items.length; ++i) {
              merged[offset + i] = incoming.items[i];
            }
            return {
              ...incoming,
              items: merged,
            };
          },
        },
      },
    },
  },
});

Field-Level Caching

Use @client directive for local state:

graphql
query GetPost($id: ID!) {
  post(id: $id) {
    id
    title
    content
    isBookmarked @client
  }
}

Real-Time Updates with Subscriptions

typescript
const POST_UPDATED = gql`
  subscription OnPostUpdated($id: ID!) {
    postUpdated(id: $id) {
      id
      title
      content
      updatedAt
    }
  }
`;

function LivePost({ id }) {
  const { data, loading } = useSubscription(POST_UPDATED, {
    variables: { id },
  });

  return <Article post={data?.postUpdated} />;
}

Error Handling

Implement robust error handling:

typescript
import { onError } from '@apollo/client/link/error';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
      console.error(
        \`[GraphQL error]: Message: \${message}, Location: \${locations}, Path: \${path}\`
      );
    });
  }
  if (networkError) {
    console.error(\`[Network error]: \${networkError}\`);
  }
});

Best Practices

1. Use Fragments: Reuse common field selections
2. Implement Pagination: Handle large datasets efficiently
3. Leverage Caching: Reduce unnecessary network requests
4. Type Generation: Use codegen for type safety
5. Monitor Performance: Track query execution times

Conclusion

GraphQL provides a powerful, flexible way to interact with your Contensa content. By following these patterns and best practices, you can build fast, maintainable applications.