The getJson() function was deprecated in v0.1.0; a loadData() function with functionality equivalent to getJson() will be provided in v0.1.1.

Until then, you can declare and use functional components as an alternative.

# A page with custom fetch function

This is a demo page with custom fetch function.

import { useState, useEffect } from 'react';

export const ComponentWithFetch = () => {
  const [data, setData] = useState(undefined);
  
  const execFetch = async () => {
  	const response = await fetch('https://api.example.com/v1/some_endopoint')
  	setData(response.data);
  }
  
  useEffect(() => {
  	execFetch();
  }, [])
  
  return (
  	<div>{ JSON.stringify(data) }</div>
  )
}

The getJson() function is one of Morph’s data retrieval functions; if the process specified by alias is SQL or a Python function that returns a DataFrame, you can retrieve the result in JSON format.

index.mdx
# Employee Data

export const employeeData = getJson({
  alias: 'employee_data_py'
});

## We have {value(employeeData).length} employees.

​
Return Value of getJson()

The return value of getJson() has the following structure

response

{
  "data": {
    "type": "json",
    "data": ...
  },
  "error": Error | undefined,
  "loading": boolean
}

data.data contains the results of executing Python functions and SQL files.

​
Displaying the return value of getJson()

The return value of getJson() is not a simple object, so you need to use the value() function to extract the value.

index.mdx
export const employeeData = getJson({
  alias: 'employee_data_py'
});

{ JSON.stringify(value(employeeData).data) }
The content enclosed in {} is evaluated as a JSX node and must be either a string, boolean, number, null, undefined, or React component. Here, we use JSON.stringify() to stringify

​
Using variables with getJson()

You can use variables with getJson() to pass parameters to SQL queries and Python functions.

index.mdx
export const depertment = variable();

<VariableInput variable={depertment} />

export const employeeData = getJson({
  alias: 'employee_data_py',
  variables: {
    department: depertment
  }
});

## We have {value(employeeData).length} employees in { value(department) } department
Using React and JavaScriptUsing Variables