November 13, 2020
Creating User Profiles in Webflow - Tutorial Part 2
In this section of the Webflow + 8base tutorial, we're going to add a customizable user profile that allows for a user avatar to get uploaded.
The 8base GraphQL Engine
8base provides the most robust GraphQL-based query language for your API.
A robust query language designed for front-end developers
Auto-generated
Auto-generated CRUD operations for all data objects.
Real-Time
Easily build real-time features using GraphQL subscriptions powered by Websockets.
Advanced Capabilities
Advanced query syntax for filtering, full text search, sorting, pagination, groupings and aggregations.
Auto-Documented
All your operations for backend resources are auto-documented.
Smart Fields
Files and Smart Fields
Groupings & Aggregations
Filtering, Pagination, Sorting
Filtering, Pagination, Sorting
Filtering, Pagination, Sorting
# Select first 5 employees from 'technology' department
# and get projects they are working on
{
department(name: "technology") {
employees(first: 5) {
count
items {
name
projects {
items {
title
}
}
}
}
}
}
# Get first 5 projects with ‘UI’ or ‘Integrations’
# tags and order them by creation date
{
projectsList(
filter: {tags: {some: {name: {in: ["UI", "Integrations"]}}}}
first: 5
orderBy: [createdAt_DESC]
) {
items {
title
tags {
items {
name
}
}
}
}
}
# Create a new project, add two employees to it
# and attach a new ‘PDF’ tag in a single transaction
mutation {
projectCreate(data: {
title: "Sales Presentation v3.0"
members: {
connect: [
{ id: "cjvy7r28l00j701s4etrbfakq"},
{ id: "cjvy7rdoj00je01s48z3lg56n"}
]
},
tags: {
create: {
name: "PDF"
}
}
}) {
title
members {
items {
name
}
}
tags {
items {
name
}
}
}
}
# Query employee picture and address
# ‘address’ is a Smart Field that has sub-fields
{
employee(id: "cjvy7mp8e001401pbczhi1ry2") {
name
picture {
downloadUrl
}
address {
country
zip
}
}
}
# Get data from connected Salesforce instance
# Query related tables in a single query
{
salesforce {
account(id: "001f400000f1DnZAAU") {
Name
Opportunities {
items {
Name
}
}
}
}
}
# Group articles by their author's name, count how many articles belong to each author, and return each groups article IDs while excluding anyarticles that do NOT have an author
# Query related tables in a single query
{
articlesList(groupBy: {
query: {
author: {
name: {
as: "authorName"
}
},
id: {
as: "authorPosts",
fn: {
aggregate: COUNT
}
},
_groupIds: {
as: "postsIds"
}
},
having: {
alias: "authorName"
string: {
is_not_empty: true
}
}
}) {
groups {
authorName: String
authorPosts: Int
postsIds: GroupIds
}
}
}
{
"data": {
"department": {
"employees": {
"count": 6,
"items": [
{
"name": "Isabel Fisher",
"projects": {
"items": [
{
"title": "Dashboard v2.0"
}
]
}
},
{
"name": "Cristen Adams",
"projects": {
"items": [
{
"title": "Data migration"
},
{
"title": "New Login UI"
}
]
}
},
{
"name": "Ellie Austin",
"projects": {
"items": [
{
"title": "Dashboard v2.0"
},
{
"title": "Data migration"
}
]
}
},
{
"name": "Naseem Carney",
"projects": {
"items": [
{
"title": "New Login UI"
}
]
}
},
{
"name": "Kaydan Harrell",
"projects": {
"items": []
}
}
]
}
}
}
}
{
"data": {
"projectsList": {
"items": [
{
"title": "Dashboard v2.0",
"tags": {
"items": [
{
"name": "ReactJS"
},
{
"name": "UI"
}
]
}
},
{
"title": "Data migration",
"tags": {
"items": [
{
"name": "Integrations"
}
]
}
},
{
"title": "New Login UI",
"tags": {
"items": [
{
"name": "ReactJS"
},
{
"name": "UI"
}
]
}
}
]
}
}
}
{
"data": {
"projectCreate": {
"title": "Sales Presentation v3.0",
"members": {
"items": [
{
"name": "Bryan Rivas"
},
{
"name": "Gabriela Patterson"
}
]
},
"tags": {
"items": [
{
"name": "PDF"
}
]
}
}
}
}
{
"data": {
"employee": {
"name": "Isabel Fisher",
"picture": {
"downloadUrl": "https://..."
},
"address": {
"country": "United States",
"zip": "56301"
}
}
}
}
{
"data": {
"salesforce": {
"account": {
"Name": "GenePoint",
"Opportunities": {
"items": [
{
"Name": "GenePoint Standby Generator"
},
{
"Name": "GenePoint Lab Generators"
},
{
"Name": "GenePoint SLA"
}
]
}
}
}
}
}
{
"data": {
"articlesList": {
"groups": [
{
"authorName": "James Huxley",
"authorPosts": 12,
"postsIds": [
"ck37jzw2f001b01l7dhm09gcu",
"ck37jzw2f001j01l77093d05d",
"ck37jzw2f001a01l73cnf8ax5",
"ck37jzw2f001i01l723258t3i",
"ck37jzw2f001h01l78n2hagxp",
"ck37jzw2f001g01l71wtk87kp",
"ck37jzw2f001o01l7hjp5ee4n",
"ck37jzw2f001f01l787o65uh7",
"ck37jzw2f001e01l76wbmgnrt",
"ck37jzw2f001m01l74cz49nb4",
"ck37jzw2f001l01l7f93be80q",
"ck37jzw2f001c01l78ga4brgb"
]
},
{
"authorName": "Huckelberry Ben",
"authorPosts": 7,
"postsIds": [
"ck37jzw2g002501l73ol60z36",
"ck37jzw2g002l01l75799d0f4",
"ck37jzw2g002t01l75ehxgbyt",
"ck37jzw2h003g01l76rzaayho",
"ck37jzw2g002c01l79r61banv",
"ck37jzw2g002q01l77hg3hgz2",
"ck37jzw2g002801l7ha9w90ov"
]
},
{
"authorName": "Stephen Begzz",
"authorPosts": 10,
"postsIds": [
"ck37jzw2o005z01l74727gcjl",
"ck37jzw2n005201l7d5aidgfv",
"ck37jzw2n004t01l7erv4fkom",
"ck37jzw2m003w01l7cafeag37",
"ck37jzw2p007701l7e0w5949g",
"ck37jzw2n004y01l714dicfap",
"ck37jzw2n005u01l7hg1u6yii",
"ck37jzw2n004p01l78w0qfm2i",
"ck37jzw2n005d01l78g7kd290",
"ck37jzw2o006801l7ghhs0gm8"
]
}
]
}
}
}
