Как сделать Docs как в GraphiQL?

Question

[Dazmond]

Делаю аналог интерактивной документации graphiQL, при получении схемы от Api с GraphQL, в моем случае с вот этого https://rickandmortyapi.com/graphql

пока сделал запрос на схему двумя разными способами, и не знаю какой лучше ибо не пойму как двигаться по схеме после ее получения

export async function getSchema() {
  const introspectionQuery = getIntrospectionQuery();
  const result = await axios.post('https://rickandmortyapi.com/graphql', {
    query: introspectionQuery,
  });
  return result.data.data;
}

export async function getGraphQLSchema() {
  try {
    const response = await axios.post('https://rickandmortyapi.com/graphql', {
      query: print(parse(getIntrospectionQuery())),
    });
    const schema = buildClientSchema(response.data.data);
    return schema;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

Подскажите люди добрые как можно в реакте сделать так чтобы у меня появлялся верхний уровень и отрисовывалось свойство в компоненте из схемы, потом кликнув на него я продвигался вглубь схемы, попутно отрисовывая нужные мне поля и так пока они не закончатся. и была возможность обратно двигаться

пример на фото

пример клика

Comments

[Василий Банников]

У тебя вопрос в том, как сделать вот такое подобие treeview или как спарсить graphql-схему?

[Dazmond]

Василий Банников, именно treeview. Схему я спарсил, привел примеры запросов выше. А как с ней работать, чтобы сделать интерактивно.