Dynamic configuration from the browser

👍

Prerequisites

In the developing a data source extension article, we described how you could create a data source and then configure it in the studio. But, you might need to add additional dynamic configuration options in the browser when requesting a data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site.. For example, for pagination or a user-provided search string.

In this article, we'll show you how to do that. For our example, we'll continue using our Star Wars API, this time for characters.

Accessing parameters in the extension

Our data source schema to return a list of all the Star Wars characters would look like this:

{
  "customDataSourceType": "example/star-wars-character-search",
  "name": "Star wars character search",
  "category": "Content",
  "icon": "source",
  "schema": []
}

The parameters for the custom data source are added to the query of the page. You can access these parameters as context.request.query inside the extension implementation:

import { DataSourceConfiguration, DataSourceContext, DataSourceResult } from '@frontastic/extension-types';
import axios from 'axios';

export default {
  'data-sources': {
    'example/star-wars-character-search': async (
      config: DataSourceConfiguration,
      context: DataSourceContext,
    ): Promise<DataSourceResult> => {
      const pageSize = context.request.query.pageSize || 10;
      const after = context.request.query.cursor || null;
      return await axios
        .post('https://swapi-graphql.netlify.app/.netlify/functions/index', {
          query: `{
            allPeople(first: ${pageSize}, after: ${JSON.stringify(after)}) {
              totalCount
              pageInfo {
                hasNextPage
                endCursor
              }
              people {
                id
                name
                species {
                  name
                }
              }
            }
          }`,
        })
        .then(
          (response): DataSourceResult => {
            return {
              dataSourcePayload: response.data?.data?.allPeople || {},
            } as DataSourceResult;
          },
        )
        .catch((reason) => {
          return {
            dataSourcePayload: {
              ok: false,
              error: reason.toString(),
            },
          } as DataSourceResult;
        });
    }
  }
};

Setting parameters in the component

You can then use the router inside a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. to change the query parameters:

import React from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';

const StarWarsCharacterSearchTastic = ({ data }) => {
  const { totalCount, pageInfo, people } = data.data.dataSource;
  const router = useRouter();

  const { slug, ...queryWithoutSlug } = router.query;

  return (
    <div>
      <h1 className="text-2xl mt-8 font-sans">Star Wars Characters</h1>
      <p className="mt-2">{totalCount} total characters found</p>
      {people.map((character) => (
        <div key={character.id}>
          <h2 className="text-lg mt-6 font-sans">{character.name}</h2>
          {character.species !== null && <p className="mt-2">Species: {character.species.name}</p>}
        </div>
      ))}
      {pageInfo.hasNextPage && (
        <div className="mt-6">
          <Link
            href={{
              pathname: router.asPath.split('?')[0],
              query: {
                ...queryWithoutSlug,
                cursor: pageInfo.endCursor,
              },
            }}
          >
            <a className="bg-primary-500 px-4 py-2 text-white">Next Page</a>
          </Link>
        </div>
      )}
    </div>
  );
};

export default StarWarsCharacterSearchTastic;

Clash of parameters

This query is shared between all the data sourcesData sources - The data provided from an API to display products, content, or anything from an extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your site. available on the same page.

So, you need to ensure you use query parameter names that don't clash between the different data sourcesData sources - The data provided from an API to display products, content, or anything from an extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your site.. If 2 or more data sourcesData sources - The data provided from an API to display products, content, or anything from an extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your site. use the same query parameter name, or if multiple instances of the data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. are used on the same page with the same query parameter name, they'll clash.

The dataSourceId can be used to distinguish different data sourcesData sources - The data provided from an API to display products, content, or anything from an extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your site. since it's guaranteed to have a unique value for each data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site..


Did this page help you?